JSaddEventListener() 、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