【知識梳理】3.3DOM事件

1.DOM事件的級別

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

DOM2:element.addEventListener('click',function(){},false)， 第三個參數若是是true則表示在捕獲階段調用，爲false表示在冒泡階段調用(默認)；

DOM3:element.addEventListener('keyup',function(){},false)，事件類型增長了不少，例如：鼠標事件，鍵盤事件等等。

2.DOM事件模型（原理）

指的就是捕獲（從上到下，true），冒泡（從當前元素向上，false）。

3.DOM事件流

三個階段，1事件捕獲階段，2目標階段，3事件冒泡階段。

4.DOM事件的捕獲流程

捕獲的具體流程：window->document->html標籤->body->..父->子..->目標元素。
反之，爲冒泡流程。

小補充：
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對象的獨有屬性）

1.event.preventDefault()，阻止默認事件，例如對a標籤阻止跳轉。

2.event.stopPropagation()，阻止冒泡事件，單擊子元素響應事件a，單擊父元素響應事件b，當單擊a時阻止事件b的響應。

3.event.stopImmediatePropagation()，事件響應優先級，當一個按鈕中同時綁定事件a和事件b,那麼在a的響應事件中加入此句話，將會阻止事件b的執行。

4.event.currentTarget()，當前所綁定事件對象，即父元素 。（常常考察，eg:一個for循環，給一個DOM註冊了n多個事件，怎麼優化？）事件代理，把子元素的事件代理都轉移到父元素上，在父元素上綁定一次事件就能夠了，當響應的時候就要區分當前是哪一個元素被點擊。

5.event.target()，當前被點擊的子元素，一個父元素下有十個子元素，只須要在父元素上綁定一次事件便可，需判斷是哪一個子元素被點擊了（常常考察，與4一塊兒）。

6.事件代理

原理：

1. 經過事件冒泡機制；
2. 在上層節點綁定事件，經過 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