Question

让我们看下面的代码：

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的值不应该作为窗口吗？

这又回到标题问题，为什么dom事件监听器回调中this的值不是window？（假设回调不是箭头函数）

Answer 1

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

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

在此示例中，this会像您期望的那样引用div。

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

Answer 2

The value of this within the handler

通常希望引用触发了事件处理程序的元素，例如在将通用处理程序用于一组相似元素时。

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

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

2 个答案:

The value of this within the handler