前端基础：说说事件绑定中的addEventListener()方法，如何解绑？

代码开发 08-22 649

前言：

此刻兄弟们对“addeventlistenerjs”大约比较着重，小伙伴们都需要分析一些“addeventlistenerjs”的相关知识。那么小编也在网络上汇集了一些关于“addeventlistenerjs””的相关资讯，希望看官们能喜欢，同学们一起来学习一下吧！

语法

dom.addEventListener(事件名称,事件处理函数,布尔值)

参数

事件名称是一个字符串，需要加引号事件处理函数（事件句柄函数）既可以是命名函数，也可以是匿名函数布尔值true 事件处理函数是在事件的捕获阶段发生的false 事件处理函数是在事件的冒泡阶段发生的（默认值，如果不写默认为false）

特性

可以通过第三个参数-布尔值来对事件处理函数调用的时机进行操控既可以调用命名函数，也可以调用匿名函数（最好为命名函数）

btn.addEventListener('click',function(){ console.log(1);},false);btn.addEventListener('click',fn1,false); //调用时直接写函数名称即可function fn1(){ console.log(1);};

可以给元素添加多个事件，且不会互相覆盖:

btn.addEventListener('click',function(){ console.log(1);},false);btn.addEventListener('click',function(){ console.log(2);},false);//这段代码最后会在控制台同时输出1和2

this指向当前元素:

<body> <input type="button"></body>btn.addEventListener('click',function(){ console.log(this); //<input type="button">},false);

移除方法

dom.removeEventListener(事件名称,事件处理函数,布尔值)

直接移除:

btn.addEventListener('click',fn1,false);function fn1(){ console.log(1); //事件绑定被移除，无论怎么点击按钮都无法在控制台输出内容};btn.removeEventListener('click',fn1,false);

执行一次后移除:

btn.addEventListener('click',fn1,false);function fn1(){ console.log(1); //事件执行一次后被移除，只会输出一次1btn.removeEventListener('click',fn1,false);};

注意：

该方法无法移除匿名函数的事件绑定故在使用该方法时事件处理函数最好为命名函数

btn.addEventListener('click',function(){ // 匿名函数 console.log(1); //这里重复点击还是会在控制台输出1},false);btn.removeEventListener('click',function(){ // 匿名函数，但与上述匿名函数不是同一个函数 console.log(1);},false);

该方法移除时，所有参数必须相同：

btn.addEventListener('click',fn1,false);function fn1(){ console.log(1);};btn.removeEventListener('click',fn1,true); //由于这里移除时第三个参数为true，与上面不同，点击后还是会输出1

阻止事件冒泡:

event.stopPropagation()方法

btn.addEventListener('click',fn1,false);function fn1(ev){ ev.stopPropagation();};

再重申一遍，没有fn1，直接写匿名函数时，无法解绑。有命名函数，移除操作时，所有参数必须相同。

欢迎关注

本文地址：http://www.longkongtuishu.com/ca98dDWsCAFQCClM.html

标签： #addeventlistenerjs #js的addeventlistener用法 #js addeventlistener两次