addEventListener方法，以及addEventListener中事件函数的this指向

最新推荐文章于 2024-02-08 07:45:00 发布

foreverhot1019

最新推荐文章于 2024-02-08 07:45:00 发布

阅读量5.6k

点赞数

分类专栏： bs

bs 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，所以，这种绑定事件的方法必须要处理浏览器兼容问题。

语法

对象.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);

移除方法

对象.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);    //事件执行一次后被移除，只会输出一次1
btn.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

阻止事件冒泡

采用事件对象.stopPropagation()方法

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

作者：素弥
链接：https://www.jianshu.com/p/205dcbbd1722
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

addEventListener中事件函数的this指向

Update： MDN的文档中关于该问题有更权威的解释 ? DOM事件处理函数中的 this 《权威指南》中文版455页关于这个问题也有说明，并且提到：IE9之前的 attachEvent()作为函数调用其 this值是全局（window）对象。
当时想这问题的时候没去找文档,书也没看仔细啊！

使用JS原型封装对象的时候，绑定事件我有时会这样写：

var obj = function() {...}

// 将某事件绑定至某对象e，但事件函数中上下文保持为obj
obj.prototype.bindEvn = function(e){
     e.addEventListener(Event,obj.method.bind(this),false)    
}


obj.prototype.method = function(){...}

这里addEventListener中this的指向我不是太清晰，虽然一直以来都直接用bind设置this的值（毫无疑问地返回了一个绑定了obj对象的函数），但是如果没用bind方法会是种什么情况？这里面的this指向是调用addEventListener方法的对象e呢还是obj（如果这样那么我这bind白用了？）
马上做个demo看下到底啥情况：
我是DEMO点击预览
（貌似demo设计得有点略傻？）

//定义一个可见的盒子用于绑定点击事件
var box = document.getElementById('box');
box.x = 'box'

//设置执行函数的对象属性
function outFunc() {
  this.x = 'outFunc';
  box.addEventListener('click', func, false);
}
outFunc();

function func() {
  console.log(this.x); //输出box 说明该this指向的是调用addEventListener的对象
}

当用bind设置this值的时候， this才指向执行函数

function outFunc() {
  this.x = 'outFunc';//给全局对象window.x赋值（相当于赋值全局变量）
  box.addEventListener('click', func.bind(this), false);
}
function func() {
  console.log(this.x); //输出outFunc 使用bind设置this的值
}

其实这里面也涉及到了JS的基本概念，也就是当函数作为方法调用时，this指向调用该方法的对象，当函数作为嵌套函数调用时， this指向全局对象（非严格模式下）或者undefined（严格模式）而不是其外包函数的上下文，如果对这个概念认识清楚了，就可以发现addEventListener的中的事件函数默认是作为调用addEventListener对象的方法，如果需要设置this的指向（比如上面的栗子中就使用bind设置this的指向为外包函数的上下文），则可以使用bind()。

这种情况和内联函数中的this指向类似，当this被内联函数调用时，它的this默认指向监听器所在的DOM元素。这里直接用MDN文档中的栗子：

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button> //输出button

在stackoverflow上也有类似问题的讨论：
The value of “this” within the handler using addEventListener
关于this值的问题，要多看看MDN的文档：
this
转自：https://segmentfault.com/a/1190000003952832

foreverhot1019

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
addEventListener方法，以及addEventListener中事件函数的this指向

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，所以，这种绑定事件的方法必须要处理浏览器兼容问题。语法对象.addEventListener(事件名称,事件处理函数,布尔值)参数事件名称是一个字符串...
复制链接

扫一扫