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

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

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

Answer 1

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

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

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

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

Answer 2

The value of this within the handler

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

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