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