【知识梳理】3.3DOM事件

时间 2019-12-14

标签知识梳理 3.3dom dom 事件栏目 HTML 繁體版

原文原文链接

1.DOM事件的级别

DOM0:element.onclick=function(){}，在html中onclick属性上加js语句；html

DOM2:element.addEventListener('click',function(){},false)，第三个参数若是是true则表示在捕获阶段调用，为false表示在冒泡阶段调用(默认)；node

DOM3:element.addEventListener('keyup',function(){},false)，事件类型增长了不少，例如：鼠标事件，键盘事件等等。函数

2.DOM事件模型（原理）

指的就是捕获（从上到下，true），冒泡（从当前元素向上，false）。优化

3.DOM事件流

三个阶段，1事件捕获阶段，2目标阶段，3事件冒泡阶段。this

4.DOM事件的捕获流程

捕获的具体流程：window->document->html标签->body->..父->子..->目标元素。
反之，为冒泡流程。spa

小补充：
document.documentElement是文档对象根节点(html)的引用，
document.body是DOM中Document对象里的body节点。

<div id="ev">
        <style>
            #ev{
                width: 300px;
                height: 100px;
                line-height: 100px;
                background-color: red;
                color: #FFF;
                text-align: center;                
            }
        </style>
        目标元素            
    </div>
    <script>
    //true为捕获时调用,顺序为window->document->html->body->ev，和定义的顺序无关，和响应的顺序有关。
    //false为冒泡时调用(默认),顺序为ev->body->html->document->window
        var ev = document.getElementById("ev");

        //定义
        ev.addEventListener("click",function(){
            console.log("ev captrue");
        },true);
        
        window.addEventListener("click",function(){
            console.log("window captrue");
        },true);

        document.addEventListener("click",function(){
            console.log("document captrue");
        },true);

        document.documentElement.addEventListener("click",function(){
            console.log("html captrue");
        },true);

        document.body.addEventListener("click",function(){
            console.log("body captrue");
        },true);

    //响应结果
    //window captrue
    //document captrue
    //html captrue
    //body captrue
    //ev captrue
    
    </script>

5.Event对象的常见应用

1.DOM事件原理（冒泡，捕获，及流程）；
2.注册事件（监听用户的交互行为）；
3.作响应的时候Event对象很是重要。

0.event获取鼠标值（ pageX=event.clientX+document.documentElement.scrollTop||document.body.scrollTop;）图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别，键盘值（event.keyCode）。JS-事件类型（鼠标事件中event对象的独有属性）.net

1.event.preventDefault()，阻止默认事件，例如对a标签阻止跳转。代理

2.event.stopPropagation()，阻止冒泡事件，单击子元素响应事件a，单击父元素响应事件b，当单击a时阻止事件b的响应。code

3.event.stopImmediatePropagation()，事件响应优先级，当一个按钮中同时绑定事件a和事件b,那么在a的响应事件中加入此句话，将会阻止事件b的执行。htm

4.event.currentTarget()，当前所绑定事件对象，即父元素。（常常考察，eg:一个for循环，给一个DOM注册了n多个事件，怎么优化？）事件代理，把子元素的事件代理都转移到父元素上，在父元素上绑定一次事件就能够了，当响应的时候就要区分当前是哪一个元素被点击。

5.event.target()，当前被点击的子元素，一个父元素下有十个子元素，只须要在父元素上绑定一次事件便可，需判断是哪一个子元素被点击了（常常考察，与4一块儿）。

6.事件代理

原理：

经过事件冒泡机制；
在上层节点绑定事件，经过 e.target 获取真实点击的元素

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    .....
    <p id="p1">激活</p>
</div>

var div1 = document.getElementById('div1');
div1.addEventListener('click',function(e){
    var target = e.target; //实际点击的a标签
    if(target.nodeName === 'A'){
        alert(target.innerHTML);
    }
});

//封装一个通用的事件监听函数
function bindEvent(elem,type,selector,fn){
    if(fn === null){
        fn = selector;
        selector = null;
    }
    elem.addEventListener(type,function(e){
        var target ;
        if(selector){
            //代理
            target = e.target;
            if(target.matches(selector)){
                fn.call(target,e);//将target赋给this
            }
        }else{
            //不是代理
            fn(e);
        }
    });
}
//调用
bindEvent(div1,'click','a',function(e){
    e.preventDefault();
    console.log(this.innerHTML);//注意：此处为this
});
bindEvent(div1,'click',function(e){
     console.log(p1.innerHTML);
});

7.自定义事件

var eve = new Event('custome');//声明一个自定义事件，只能指定事件名

            ev.addEventListener('custome',function(){
                console.log('custome');
            });//ev指一个DOM对象

            //触发自定义事件
            setTimeout(function(){
                ev.dispatchEvent(eve);
            },1000);


            //CustomEvent，能够指定事件名，后边能够跟一个obj来作指定参数

<h2>自定义事件</h2>
    <p>var signin = new Event("event");//声明一个自定义事件，只能指定事件名</p>
    <div id="ev2">
        <style>
            #ev2{
                width: 300px;
                height: 100px;
                line-height: 100px;
                background-color: red;
                color: #FFF;
                text-align: center;                
            }
        </style>
        Event自定义事件            
    </div>    

    <p>var signout = new CustomEvent("CustomEvent",{
            detail:{
                name:"ld",sex:"female"
            }
        });能够指定事件名，后边能够跟一个obj来作指定参数</p>
    <div id="ev3">
        <style>
            #ev3{
                width: 300px;
                height: 100px;
                line-height: 100px;
                background-color: red;
                color: #FFF;
                text-align: center;                
            }
        </style>
        CustomEvent自定义事件            
    </div>
    <script>
        var ev2 = document.getElementById("ev2");        
        var signin = new Event("event");
        ev2.addEventListener("event",function(){
            console.log("event dispatch");
        });
        setTimeout(function(){
            ev2.dispatchEvent(signin);//此处传入的是事件对象signin，而不是事件名event
        },1000);        

        var ev3 = document.getElementById("ev3");        
        var signout = new CustomEvent("CustomEvent",{
            detail:{
                name:"ld",sex:"female"
            }
        });
        ev3.addEventListener("CustomEvent",function(e){
            console.log("CustomEvent dispatch");
            console.log(e);
            console.log(e.detail.name);
        });
        setTimeout(function(){
            ev3.dispatchEvent(signout);
        },1000);        
    </script>

//输出结果
//event dispatch
//CustomEvent dispatch
//CustomEvent {isTrusted: false, detail: {…}, type: "CustomEvent", target: div#ev3, currentTarget: div#ev3, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falsedetail: {name: "ld", sex: "female"}eventPhase: 0isTrusted: falsepath: (5) [div#ev3, body, html, document, Window]returnValue: truesrcElement: div#ev3target: div#ev3timeStamp: 37.19999999884749type: "CustomEvent"__proto__: CustomEvent
//ld