关于DOM2级事件的事件捕获和事件冒泡

花一天时间研究完了DOM2级事件中addEventListener的执行机制，作为开山第一帖，和大家讲讲多个addEventListener同时添加时的执行先后规律：
图片描述

如图，大家都知道，W3c的DOM事件触发分为三个阶段：
①、事件捕获阶段，即由最顶层元素（一般是从window元素开始，有的浏览器是从document开始，至于其中的差别我稍后会更新）开始，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件
②、处于目标阶段，检测机制到达目标元素，按事件注册顺序执行绑定在目标元素上的事件。
③、事件冒泡阶段，从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定再其上的事件。

在addEventListener中，利用第三个参数控制其是从哪个阶段开始，“true”是从捕获阶段开始，而“false”则是跳过捕获阶段，从冒泡阶段开始。
看一个简单的例子：

<script type="text/javascript">
window.onload=function(){
    var outer = document.getElementById("outer");
    var inner = document.getElementById('inner');

outer.addEventListener("click",   function(){
      alert("1");
    }
, true);

 inner.addEventListener("click",      function(){
      alert("2");
     }
, true);

 outer.addEventListener("click",
     function(){
        alert("3");
    }
,false)   
}
</script>

<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>

在这个例子里，如果我们点击内层元素inner,那么处于捕获阶段的1最先弹出，接下来是目标元素2弹出，最后是处于冒泡阶段的3弹出，即：1，2，3.
即使在代码里变换三个绑定事件的顺序，只要点击的是inner,这个执行顺序就不会变。

那么问题来了，如果点击的是外层outer的话呢？

要明白这个问题，我们必须明确一点：目标事件在哪一层，事件流就在哪一层回流，即使在outer事件下还有许多子孙节点，事件流都不会在outer之后往内流，此时，inner上的事件不会被触发，因此在这段代码中，只会弹出1和3。

那么这两个数字哪个先弹呢？由于此时事件处于第二阶段，即“处于目标阶段”，弹出顺序取决的也不再是捕获或冒泡，而是谁在代码中先注册，因此，在这段代码中，弹出的是：1→3.

综上所述，事件在DOM中的执行顺序为：外层捕获事件→内层捕获事件→先注册的目标事件→后注册的目标事件→内层冒泡事件→外层冒泡事件

让我们再看个例子来加深这个概念：

<script type="text/javascript">
window.onload=function(){
    var outer = document.getElementById("outer");
    var inner = document.getElementById('inner');
    var oBox=document.getElementById('box');
    
    oBox.addEventListener("click",function(){
        alert('1');
    },true)
    oBox.addEventListener("click",function(){
        alert('4');
    },false)
    

    outer.addEventListener("click", function(){
      alert("2");
    }, true);

    
    inner.addEventListener("click",function(){
        alert('3.2')
    },false)
    

    inner.addEventListener("click", function(){
      alert("3.1");
     }, true);
    
}
</script>

<body>
    <div id="box">
        <div id="outer">
            <div id="inner"></div>
        </div>
    </div>
</body>

在这段代码里，box上的捕获事件最先执行，然后是outer上的捕获事件，然后是inner上先注册的事件，然后是inner上后注册的事件，最后是box上的冒泡事件
弹出顺序为：1→2→3.2→3.1→4

补充一点，在ie8-中，由于addEventLister不起作用，我们使用attachEvent方法来绑定事件，此时在第二阶段，也就是处于目标阶段，如果目标元素上绑定了两个事件，那么其执行顺序和addEventLister相反：谁后注册谁先执行。

关于DOM2级事件的事件捕获和事件冒泡

CatherineYF

引用和评论

线程与进程入门

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号