（二）简析JS中事件，事件绑定，事件冒泡，事件捕获和事件执行顺序

本文链接：https://blog.csdn.net/qq_33345511/article/details/102685007

2.addEventListener事件传递过程

上一节中我们讲到了什么是事件以及常见的三种绑定事件的方法https://blog.csdn.net/qq_33345511/article/details/102680164，今天我们来具体聊一聊addEventListener方法事件传递过程

DOM0级：document.getElementById(“btn”).onclick = function(){};

DOM2级：document.getElementById("btn").addEventListener('click',function(){},false)

在DOM2级事件中规定事件流包括三个阶段：

捕获阶段（event capturing）：从根节点开始顺序而下，检测每个节点是否注册了事件处理过程。如果注册了事件处理程序，并且useCapture为true，则调用该事件处理程序（IE中无此阶段）。

目标阶段（正常事件派发阶段）：触发在目标对象本身注册的事件处理程序。

冒泡阶段（dubbed bubbling）：从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且useCapture为false，则调用该事件处理程序。

事件冒泡与事件捕获是为了解决页面中事件流（事件发生顺序）问题。如图是事件捕获和事件冒泡的过程。

我们用代码来理解捕获和冒泡（运行在IE浏览器上会报错）：

在button上点击鼠标，事件流是这样的：

捕获阶段：检测document 是否有useCapture为true的事件处理函数，若有，则执行该程序，同样的处理html ，body到div。

目标阶段：在div处，发现div是鼠标点击的节点，所以这里为目标阶段，若有事件处理程序则执行该程序，此时不论useCapture是否为true（此时会输出1）。

冒泡阶段：继续执行，在body处检测是否有useCapture为false的事件处理函数，若有则执行该程序，同样的处理HTML，document节点。

改变代码顺序：

解决兼容性问题（例子有点失败，在IE11上兼容addEventListener，而在IE78上又不支持getElementByClassName，懒得再去调试了）：

移除事件（*****）

我们直接来看代码：

总结：

1）true（捕获）的触发顺序总是在false（冒泡）之前

2）如果多个都为true ，则外层的触发先于内层

3）如果多个都为false，则内层的触发先于外层

4）时间绑定后，该绑定代码作用域的变量就都保留下来，不会被JS引擎回收，可能会引起占用大量内存的问题，removeEventListener无法删除匿名函数的事件处理，只有在HTML元素（如：按钮）去除之后，该内存才可能得到回收

附：案例代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>移除事件</title>
   </head>
   <body>
       <button type="button" class="mui-btn">按钮1</button><br /><br />
       <button type="button" class="mui-btn">按钮2</button><br />
       <script type="text/javascript">
           var aBtn = document.getElementsByClassName("mui-btn");
           var arr = [aBtn[0], aBtn[1],document.body,document];
           // 点击按钮,弹出绑定事件对应的数组下标
           for (var i = 0; i < arr.length; i++) {
               // 自执行函数(闭包)
               (function(index){
                   // 普通方式添加事件
                   // arr[i].onclick = function() {
                   //    console.log(this+index+"普通方式添加事件");
                   // }
               })(i);
               // 事件绑定冒泡
               // arr[i].addEventListener('click',function(){
               //    console.log(this)
               // },false);
           }
           // ES6 {}块级作用域,在{}中定义函数,在函数中用块级作用域内的数据=>闭包
           for(let i=0;i<arr.length;i++){
               // 事件绑定冒泡
               // arr[i].addEventListener('click',function(){
               //    console.log(this+"事件绑定之冒泡"+i);
               // },false);
               // 事件绑定捕获
               arr[i].addEventListener('click',function(){
                   console.log(this+"捕获"+i)
               },true)
           }
       </script>
   </body>
</html>