JS的事件流模型

js的事件流模型

事件捕抓：是一种以从上至下的的方式进行传播。以click事件为例，它会从最外层的根节点到达点击的节点。它是从最外层的根节点逐渐向目标节点传输的方式。

事件冒泡: 是一种从下之上的方式的传播方式，同样用click事件为例，事件由被点击的根节点开始往上传播直至点击的最外层根节点。

DOM0级模型(原始事件模型)

这种方式较为简单，并且兼容所有浏览器。但是却将界面与逻辑耦合在一起，可维护性很差。

例子

当点击id为i3的div时，浏览器会返回2 1 0

IE事件模型

ie8之前的版本是不支持事件捕获的。
IE的事件模型分为两个过程:
事件处理阶段: 事件到达目标元素，触发目标元素的监听事件
事件冒泡阶段: 事件从目标元素冒泡到document，依茨执行经过的节点绑定的事件。

DOM2级模型

DOM2事件模型是W3C制定的标准模型，支持捕获型事件和冒泡型事件，调用事件的处理阶段分为捕获,目标,冒泡

实例

当点击id为i3的div时，浏览器会依次弹出0 1 3 2,addEventListener方法的第三个参数为声明绑定的事件为捕获型还是冒泡型，默认为false，也就是冒泡型

document对象与i1节点绑定的是捕获型的监听事件，i2与i3节点绑定的是冒泡型事件。

window --- document --- html --- body --- i1 --- i2 --- i3 --- i2 --- i1 --- body --- html --- document --- window

从window到i3过程为捕获阶段，依次执行了过程中绑定的事件，本例中执行了alert(0)和alert(1),然后到达了目标阶段的i3，执行i3绑定的事件alert(3),然后从i3到window的阶段为冒泡阶段。执行了alert(2),执行顺序为0 1 3 2

---

绑定监听事件使用的区别

在DOM0中直接绑定函数执行时，后定义的函数会覆盖前面定义的函数。click()是一个对象事件，点击即触发onclick()绑定的方法，onclick()是对象的属性，将其绑定函数后即为click()事件触发后执行的方法

而addEventListener可以为事件绑定多个函数，并且绑定时不需要加on，而且它还可以接受三个参数useCapture来决定事件时绑定的捕获阶段还是冒泡阶段执行。

    document.getElementById("i1").addEventListener('click',(e) => {
        alert(0);
    }) // 执行

    document.getElementById("i1").addEventListener('click',(e) => {
        alert(1);
    }) // 执行

attachEvent可以为事件绑定多个函数，绑定时需要加on，其只支持冒泡阶段执行，所以不存在第三个参数。

   document.getElementById("i1").attachEvent('onclick',function(e){
       alert(0);
   }) // 执行

   document.getElementById("i1").attachEvent('onclick',function(e){
       alert(1);
   }) // 执行

Tips

• 关于addEventListener和attachEvent的区别。

IE不支持addEventListener和removeEventListner。在ie为了实现类似功能是使用attachEvent和detachEvent

• 关于兼容性

attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

---

原文:https://www.cnblogs.com/WindrunnerMax/p/12558442.html
部分参考内容:https://www.jianshu.com/p/4af0476a08c9