为什么在dom事件监听器回调中`this`的值不是窗口?

问题描述 投票:0回答:2

我们来看看以下代码:

const div = document.getElementById('foo');
div.addEventListener('click', function() {
  console.log(this);
});
<div id="foo">click me</div>

此按钮将始终记录我单击的dom元素。我一直都知道这是真的,我知道我可以在这里使用箭头函数来使this的值为window。我们假设这个问题的非箭头函数语法。

据我所知,this的值取决于如何调用封闭函数。这个事件监听器的回调肯定不会在dom元素上调用。

在我看来,当点击div时,它会将匿名函数添加到消息队列中。当队列为空时,它会在全局执行上下文中调用匿名函数(也许这就是我错的地方)。

如果它在全局执行上下文中调用此匿名函数,那么this的值不应该是窗口吗?

这导致回到标题问题,为什么this在dom事件监听器回调中的值不是window? (假设回调不是箭头功能)

javascript html object ecmascript-6
2个回答
2
投票

这是因为它是附加到div对象的方法 - 想象它是这样的:

const div = {
    addEventListener: function(event, callback) {...}
};

在这个例子中,this会像你期望的那样引用div

这是您的代码中实际发生的事情,只是它的定义不同。


0
投票

The value of this within the handler

通常需要引用触发事件处理程序的元素,例如对一组类似元素使用泛型处理程序时。

如果使用addEventListener()将处理函数附加到元素,则处理程序内的this值是对元素的引用。它与传递给处理程序的事件参数的currentTarget属性的值相同。

热门问题
推荐问题
最新问题