JS addEventListener() 、removeEventListener() 事件监听

JS addEventListener() 、removeEventListener() 事件监听

1、参数解读

      1.1、element.addEventListener(type，handler，Boolean)

• type: 事件类型 eg：‘click’ 、‘keyup’、‘keydown’、‘focus’ 等; 注意：是’click’不是’onclick’;
• handler: 事件执行触发的函数 function(){};
• Boolean : false/true ; false为冒泡/ture为捕获; 参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。一般的绑定事件，都是采用冒泡方式，也就是使用 false

      1.2、element.removeEventListener(type，handler，false/true) 解除事件监听

     参数同上

作用

• **addEventListener()**方法可以更容易地控制事件对冒泡的反应。
• **addEventListener()**用于给元素添加事件处理程序；可以向一个元素添加许多事件处理程序，即可以向一个元素添加许多相同类型的事件处理程序，eg: 两个’click’事件。
• 事件监听器添加到任何DOM对象，而不仅仅是HTML元素。也可以是window对象。
• 使用**removeEventListener()**方法轻松删除事件侦听器。

2、事件冒泡或事件捕获？

2.1、什么是事件？

用户与web页面发生某些特定交互的瞬间 事件就产生了

2.2、事件流？事件传播？

事件流描述的是从页面接收事件的顺序；事件传播是一种在事件发生时定义元素顺序的方法。HTML DOM中有两种事件传播方式，即冒泡和捕获。
IE提出了事件冒泡
网景提出了事件捕获

2.3、事件冒泡

即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
jq的e.stopPropagation会阻止事件冒泡
vue的.stop修饰符也会阻止事件冒泡

2.4、事件捕获

事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件

eg：下面的dom结构

<div id="father">
        <div id="son"></div>
</div>

然后执行下面js部分,点击子盒子就可以看到控制台事件执行顺序

// 使用addEventListener()方法，可以使用"true/false"参数指定传播类型
// 默认值为false => 冒泡排序，为true => 捕获排序;
  var son = document.getElementById("son");
  var father = document.getElementById("father");
  var arr = [son, father, document, document.body];
  for (var i = 0;