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: 必