Что содержит this в обработчике события на кнопку в JavaScript

Что проверяют

Понимаете ли вы, что значение this в JavaScript задаётся способом вызова, а не местом объявления функции. Обработчик события это удобный частный случай: по ответу видно, знает ли кандидат правило целиком или запомнил одну формулировку и тащит её всюду.

Как отвечать

Если обработчик задан обычной функцией, this внутри него это элемент, на котором висит слушатель, то есть ровно event.currentTarget. Именно currentTarget, а не target: клик мог прийти по вложенной иконке внутри кнопки, и тогда target это иконка.

btn.addEventListener('click', function (e) {
  this === e.currentTarget; // всегда true
  this === e.target;        // только если кликнули по самой кнопке
});

У стрелочной функции собственного this нет, она берёт его из окружающей области видимости: в ES-модуле это undefined, в классическом скрипте на верхнем уровне window, в поле класса сам экземпляр. Поэтому стрелка и удобна внутри класса, когда нужен объект компонента, а не узел.

Стоит добавить два варианта, про которые обычно молчат: слушателем можно передать объект с методом handleEvent, тогда this это сам объект, а bind жёстко фиксирует контекст и перекрывает поведение по умолчанию.

Где спотыкаются

Говорят «this это кнопка» и путают его с event.target. На делегировании, когда слушатель висит на контейнере, this это контейнер, а элемент, по которому кликнули, придёт в target, и обработчик начинает работать не с тем узлом.

Пишут стрелку прямо в addEventListener, ожидая получить элемент, и упираются в undefined внутри модуля. Элемент там достают из аргумента события, а не из this.

Вешают обработчик через bind и потом пытаются снять его через removeEventListener с исходной функцией. bind возвращает новую функцию, ссылка не совпадает, слушатель остаётся висеть и удерживает узел в памяти.