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; i < arr.length; i++) {
    // 默认是冒泡顺序// arr[i].onclick = function(){
    // console.log(this);// } // 第三个参数为 false 冒泡顺序 /* arr[i].addEventListener("click",function(){console.log(this); },false); */// 第三个参数为 true 捕获顺序 arr[i].addEventListener("click", function () {
    console.log(this);}, true)}

3、addEventListener() 绑定事件

eg：事件绑定

	<!-- 可以给div添加样式便于观察 --><div id="father"><div id="son"></div></div><div id="uncle"></div>

	var father = document.getElementById("father");// 函数参数可在外部定义传入也可在内部定义// 内部直接写入father.addEventListener("click", function(){
     alert("第一次点击"); });// 外部定义，传入father.addEventListener("click", exampleFn);function exampleFn() {
    alert ("第一次点击");}

addEventListener（添加点击事件监听器）形式的绑定事件不会互相抵消，从而实现一个按钮控制多个事件。

	var father = document.getElementById("father");var uncle = document.getElementById("uncle");// 传统方式father.onclick = function () {
    console.log("第一次");}uncle.onclick = function () {
    console.log("第二次");}// 添加事件监听器uncle.addEventListener("click", function () {
    console.log("监听事件绑定第一次");}, false);uncle.addEventListener("click", function () {
    console.log("监听事件绑定第二次");}, false);

输出结果为：

// 点击father盒子时控制台输出
"第一次"
// 点击uncle盒子时
"第二次"
"监听事件绑定第一次"
"监听事件绑定第二次"

总：由上述结果可知，通过添加事件监听器形式绑定事件不会相互抵消

4、removeEventListener()移出事件

eg：解除事件

	<!-- 可以给div添加样式便于观察 --><div id="father"><div id="son"></div></div><div id="uncle"></div>

js代码部分：

	var father = document.getElementById("father");var uncle = document.getElementById("uncle");// 传统方式father.onclick = function () {
    console.log("第一个");}uncle.onclick = function () {
    console.log("第二个");}uncle.onclick = null;// 添加事件监听器uncle.addEventListener("click", exampleFn, false);function exampleFn() {
     console.log("监听事件绑定第一个");};// 移除事件uncle.removeEventListener("click", exampleFn, false);

注：在IE 8和更早版本并不支持addEventListener()和removeEventListener()；所以，对于这些特定的浏览器版本，我们可以使用attachEvent()搭配detachEvent()给元素绑定，解绑事件；

	var father = document.getElementById("father");if (father.addEventListener) {
         // 对于所有主流浏览器，IE 8及更早版本除外father.addEventListener("click", exampFn);} else if (father.attachEvent) {
       // 适用于IE 8及更早版本father.attachEvent("onclick", exampleFn);}

关于 attachEvent和addEventListener