前端基礎學習之事件階段和委託代理

事件傳播模式

事件冒泡：事件由最具體的元素接收，不斷經過上級節點，直到頁面元素document。
事件捕獲：事件由最外層頁面元素接收，不斷經過下級節點，直到觸發的目標節點。

瀏覽器默認按照冒泡方式傳播。

三個階段

冒泡階段： 冒泡傳播模式中，由目標節點到document的過程，叫冒泡階段。
目標階段： 事件不斷傳遞(或直接觸發)，最終在具體元素(目標節點)上觸發的時候，叫做目標階段。
捕獲階段：捕獲傳播模式中，由document到目標節點的過程，叫捕獲階段。
可打印e.eventPhase判斷當前屬於什麼階段：1-捕獲 2-目標 3-冒泡

事件監聽器 addEventListener

addEventListener(eventName,callback,useCapture)
useCapture 指定事件傳播模式，表示以哪個順序接收事件。
false (默認) 冒泡傳播
true 捕獲傳播

DOM示例

/*css*/
.box{margin:10% auto;color:#fff;text-align: center;}
#box1{width:300px;height: 300px;background-color: #2d3436;}
#box2{width:200px;height: 200px;background-color: #636e72;}
#box3{width:100px;height: 100px;background-color: #b2bec3;}

/*html*/
<div id="box1" class="box">box1
    <div id="box2" class="box">box2
        <div id="box3" class="box">box3</div>
    </div>
</div>

/*js*/
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var useCapture = false;
document.addEventListener('click',e=>{
    console.log('document觸發click事件。',e.eventPhase)
},useCapture);
box1.addEventListener('click',e=>{
    console.log('box1觸發click事件。',e.eventPhase)
},useCapture);
box2.addEventListener('click',e=>{
    console.log('box2觸發click事件。',e.eventPhase)
},useCapture);
box3.addEventListener('click',e=>{
    console.log('box3觸發click事件。',e.eventPhase)
},useCapture);

當前屬於默認冒泡傳播模式，點擊box3輸出：
box3觸發click事件。 2
box2觸發click事件。 3
box1觸發click事件。 3
document觸發click事件。 3

修改useCapture=true，變更爲捕獲傳播模式，點擊box3輸出：
document觸發click事件。 1
box1觸發click事件。 1
box2觸發click事件。 1
box3觸發click事件。 2

目標階段定義：
刪除box3的事件監聽，點擊box3，box2事件打印的階段不是2，因爲box3纔是目標節點。
點擊box2，box2事件打印的是2，因爲box2正是目標節點。

事件委託/事件代理

原理： 事件冒泡機制
事件觸發，觸發事件的**最具體元素（目標節點）**將作爲參數傳給回調事件callback。

// 在上面事件回調中打印觸發事件的元素，點擊box3發現打印的都是box3
document.addEventListener('click',e=>{
    console.log(e.target)
});
box1.addEventListener('click',e=>{
    console.log(e.target)
});
box2.addEventListener('click',e=>{
    console.log(e.target)
});
box3.addEventListener('click',e=>{
    console.log(e.target)
});

於是可以委託父級監聽子元素的事件，而不用給每個子元素註冊事件

// 上面4個註冊可統一爲這一個
document.addEventListener('click',e=>{
    console.log(e.target)
    // 可根據e的一些屬性或nodeName判斷是子元素還是父元素
});

事件委託/代理優點：

1.減少內存佔用，減少事件註冊。
2.js新增子元素動態綁定事件（無需再次對其綁定）

使用事件委託注意事項：
使用“事件委託”時，並不是說把事件委託給的元素越靠近頂層就越好。事件冒泡的過程也需要耗時，越靠近頂層，事件的”事件傳播鏈”越長，也就越耗時。如果DOM嵌套結構很深，事件冒泡通過大量祖先元素會導致性能損失。

參考：
EventTarget.addEventListener()
JavaScript事件代理（事件委託）