addEventListener中事件函数的this指向

2bdenny 发布于2019-08-21 10:46 / 705人阅读

摘要：的文档中关于该问题有更权威的解释事件处理函数中的权威指南中文版页关于这个问题也有说明，并且提到之前的作为函数调用其值是全局对象。这种情况和内联函数中的指向类似，当被内联函数调用时，它的默认指向监听器所在的元素。

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

在stackoverflow上也有类似问题的讨论：
The value of “this” within the handler using addEventListener
关于this值的问题，要多看看MDN的文档：
this

自己动手，丰衣足食，吃早餐去了～

GPU云服务器云服务器 this的指向改变this指向指向函数的指针 java中this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86145.html

IE兼容性

摘要：方式方式方式指向节点对象输出事件对象输出事件对象输出事件对象指向节点对象输出事件对象输出事件对象输出事件对象指向全局对象输出事件对象如果是方式定义的时候也可以没有形参但是被调用的时候一定会传递一个事件对象如果有形参则用接收如果没有可以在函数 hello1 //方式1 hello2 //方式2 hello3 //方式3 document.ge...

刘东 2019-08-20 14:45 评论0 收藏0
深入理解js Dom事件机制（二）——添加事件处理程序

摘要：深入理解事件机制一事件流事件就是当用户或者浏览器自身执行的某种动作，诸如等都是事件的名称，那响应个事件的函数就称为事件处理程序事件处理函数事件句柄。深入理解js Dom事件机制（一）——事件流事件就是当用户或者浏览器自身执行的某种动作，诸如 click、mouseover等都是事件的名称，那响应个事件的函数就称为事件处理程序（事件处理函数、事件句柄）。事件处理程序的名字都是以on...

ddongjian0000 2019-08-21 17:39 评论0 收藏0
深入理解js Dom事件机制（二）——添加事件处理程序

摘要：深入理解事件机制一事件流事件就是当用户或者浏览器自身执行的某种动作，诸如等都是事件的名称，那响应个事件的函数就称为事件处理程序事件处理函数事件句柄。深入理解js Dom事件机制（一）——事件流事件就是当用户或者浏览器自身执行的某种动作，诸如 click、mouseover等都是事件的名称，那响应个事件的函数就称为事件处理程序（事件处理函数、事件句柄）。事件处理程序的名字都是以on...

qianfeng 2019-08-01 18:00 评论0 收藏0
JavaScript系列事件

摘要：推荐使用该方式进行事件的注册，可以对同一节点注册多个事件处理函数。当前冒泡流是被大多浏览器支持，因此大多赋为。阻断事件的冒泡流或者事件捕获流。资料推荐红宝书阮一峰事件模型一步，一步前進の一步 showImg(https://segmentfault.com/img/bVbfVGO?w=830&h=328); 事件是文档或者浏览器窗口中发生的一些交互瞬间。JS注册事件处理程序来预订事件...

周国辉 2019-08-23 11:29 评论0 收藏0
this指针使用及call(),apply()及bind()的使用

摘要：目录一理解指针意义二用解决指针指向问题三的使用场景与少用之处一理解指针意义让我们先理解好指针的定义引用的是函数执行的环境对象永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的通俗地讲，就是谁调用，就指向谁我们分类举例举例前先看下本目录一.理解this指针意义二.用call(),apply(),bind()解决指针指向问题三.bind()的使用场景与少用之处一.理解thi...

iKcamp 2019-08-26 12:21 评论0 收藏0