JavaScript原生系列-事件代理(事件委託)、事件捕獲、事件冒泡

轉載請註明預見才能遇見的博客：http://my.csdn.net/

原文地址：https://blog.csdn.net/pcaxb/article/details/100665670

JavaScript原生系列-事件代理(事件委託)、事件捕獲、事件冒泡

目錄

1.事件委託作用

2.以往註冊事件

3.用addEventListener(type,listener,useCapture)實現

4.事件捕獲

5.事件冒泡

6.事件委託

7.事件委託和新增節點綁定事件

---

事件代理(事件委託)：事件委託就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

事件捕獲：當一個事件觸發後,從Window對象觸發,不斷經過下級節點,直到目標節點。在事件到達目標節點之前的過程就是捕獲階段。所有經過的節點,都會觸發對應的事件

事件冒泡：當事件到達目標節點後，會沿着捕獲階段的路線原路返回。同樣，所有經過的節點,都會觸發對應的事件

1.事件委託作用

（1）支持爲同一個DOM元素註冊多個同類型事件

（2）可將事件分成事件捕獲和事件冒泡機制

2.以往註冊事件

用以往註冊事件的方法,如果存在多個事件,後註冊的事件會覆蓋先註冊的事件

let div01 = document.getElementById("div01");
div01.onclick = ()=>console.log(111);
div01.onclick = ()=>console.log(222);

只會打印222，後面的事件會覆蓋前面的事件

3.用addEventListener(type,listener,useCapture)實現

• type: 必須,String類型,事件類型
• listener: 必須,函數體或者JS方法
• useCapture: 可選,boolean類型。指定事件是否發生在捕獲階段。默認爲false,事件發生在冒泡階段。

let div01 = document.getElementById("div01");
div01.addEventListener("click",()=>console.log(111));
div01.addEventListener("click",()=>console.log(222));

都會打印，後面的事件不會覆蓋前面的事件

4.事件捕獲

當一個事件觸發後,從Window對象觸發,不斷經過下級節點,直到目標節點。在事件到達目標節點之前的過程就是捕獲階段。所有經過的節點,都會觸發對應的事件

window.addEventListener("click",()=>console.log("window"),true);
document.addEventListener("click",()=>console.log("document"),true);
document.body.addEventListener("click",()=>console.log("body"),true);
document.getElementById("div01").addEventListener("click",()=>console.log("div01"),true);

打印順序：window--document--body--div01

5.事件冒泡

當事件到達目標節點後，會沿着捕獲階段的路線原路返回。同樣，所有經過的節點,都會觸發對應的事件

window.addEventListener("click",()=>console.log("window"));
document.addEventListener("click",()=>console.log("document"));
document.body.addEventListener("click",()=>console.log("body"));
document.getElementById("div01").addEventListener("click",()=>console.log("div01"));

打印順序：div01--body--document--window

6.事件委託

事件委託就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

事件委託的優點：

（1）（比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for循環的方法，來遍歷所有的li，然後給它們添加事件。） 提高性能:每一個函數都會佔用內存空間。每一個事件都會與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多；如果使用事件委託，只需添加一個事件處理程序代理所有事件,所佔用的內存空間更少。

（2）動態監聽:使用事件委託可以自動綁定動態添加的元素,即新增的節點不需要主動添加也可以一樣具有和其他元素一樣的事件。

window.addEventListener("click",()=>console.log("window1"),true);
document.addEventListener("click",()=>console.log("document1"),true);
document.body.addEventListener("click",()=>console.log("body1"),true);
document.getElementById("div01").addEventListener("click",()=>console.log("div01-1"),true);

window.addEventListener("click",()=>console.log("window2"));
document.addEventListener("click",()=>console.log("document2"));
document.body.addEventListener("click",()=>console.log("body2"));
document.getElementById("div01").addEventListener("click",()=>console.log("div01-2"));

點擊div01過程：

div01-1和div01-2誰在前面誰先執行

 

7.事件委託和新增節點綁定事件

點擊1和點擊2沒有添加點擊事件，但是都會打印當前節點，子節點冒泡到父節點，後期增加子節點，不需要綁定事件就會打印當前節點

<div id="divParent">
    <div id="div01">點擊1</div>
    <div id="div02">點擊2</div>
</div>

document.getElementById("divParent").addEventListener("click",(e)=>{
    console.log(e.target);
});

 

JavaScript原生系列-事件代理(事件委託)、事件捕獲、事件冒泡

博客地址：https://blog.csdn.net/pcaxb/article/details/100665670