Почему значение `this` в обратном вызове прослушивателя событий dom не является окном?

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

Значение этого в обработчике

Часто желательно ссылаться на элемент, для которого был запущен обработчик события, например, при использовании универсального обработчика для набора похожих элементов.

Если присоединить функцию-обработчик к элементу с помощью addEventListener(), значение this внутри обработчика является ссылкой на элемент. Он совпадает со значением свойства currentTarget аргумента события, передаваемого обработчику.