JS的事件流模型

js的事件流模型

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

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

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

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

例子

    <!DOCTYPE html>
<html>
<head>
    <title>JS事件流模型</title>
</head>
<style type="text/css">
    div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div id="i1" style="height: 150px;width: 150px;background: red;" onclick="alert(0)">
        <div id="i2" style="height: 100px;width: 100px;background: green;" onclick="alert(1)">
            <div id="i3" style="height: 50px;width: 50px;background: blue;" onclick="alert(2)"></div>
        </div>
    </div>
</body>
</html>

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

IE事件模型

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

DOM2级模型

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

实例

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

<!DOCTYPE html>
   <html>
   <head>
       <title>JS事件流模型</title>
   </head>
   <style type="text/css">
       div{
           display: flex;
           justify-content: center;
           align-items: center;
       }
   </style>

   <body>
       <div id="i1" style="height: 150px;width: 150px;background: red;">
           <div id="i2" style="height: 100px;width: 100px;background: green;">
               <div id="i3" style="height: 50px;width: 50px;background: blue;"></div>
           </div>
       </div>
   </body>

   <script type="text/javascript">
       document.addEventListener('click',(e) => {
           alert(0);
       },true) 
       document.getElementById("i1").addEventListener('click',(e) => {
           alert(1);
       },true) 
       document.getElementById("i2").addEventListener('click',(e) => {
           alert(2);
       })  
       document.getElementById("i3").addEventListener('click',(e) => {
           alert(3);
       })     
   </script>
</html>

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()事件触发后执行的方法

    <!DOCTYPE html>
<html>
<head>
    <title>JS事件流模型</title>
</head>
<style type="text/css">
    div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div id="i1" style="height: 150px;width: 150px;background: red;"></div>
</body>

<script type="text/javascript">

    document.getElementById("i1").onclick = function(){
        alert(0);
    } // 被覆盖

    document.getElementById("i1").onclick = function(){
        alert(1);
    } // 执行
    
</script>
</html>

而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