Как работает передача функций в addEventListener?

Метод addEventListener — это стандартный способ подписки на события DOM-элементов в JavaScript. Он принимает минимум два аргумента: строку с названием события (например, 'click') и функцию-обработчик, которая будет выполнена при срабатывании события. Передача функции происходит по ссылке, что позволяет использовать один и тот же обработчик для нескольких элементов или событий.

Как передавать функцию

Ключевой момент — передавать саму функцию, а не результат её вызова. Если поставить скобки после имени функции, она выполнится немедленно, и в addEventListener попадёт её возвращаемое значение (часто undefined), что не сработает.

// Правильно: передаём функцию
button.addEventListener('click', handleClick);

// Неправильно: вызываем функцию, передаём её результат
button.addEventListener('click', handleClick()); // Ошибка!

// Анонимная функция тоже работает
button.addEventListener('click', function() {
  console.log('Клик!');
});

// Стрелочная функция
button.addEventListener('click', () => {
  console.log('Клик от стрелочной функции!');
});

Контекст и объект события

При вызове обработчика ему передаётся объект события (Event), содержащий информацию о произошедшем (координаты, целевой элемент и т.д.). Контекст (this) внутри обычной функции, переданной в addEventListener, будет ссылаться на элемент, на котором висит обработчик. В стрелочных функциях this берётся из внешней области.

button.addEventListener('click', function(event) {
  console.log(this); // button element
  console.log(event.type); // 'click'
});

// В стрелочной функции this — из внешнего контекста
button.addEventListener('click', (event) => {
  console.log(this); // window (если в глобальной области)
});

Практическое применение

Этот механизм используется повсеместно для интерактивности веб-страниц: обработка кликов, ввода текста, отправки форм, движения мыши. Он позволяет отделить логику поведения от разметки (в отличие от атрибутов типа onclick в HTML). Также можно добавлять несколько обработчиков на одно событие для одного элемента.

Вывод: Передавайте функцию-обработчик в addEventListener по ссылке, без вызова. Используйте этот метод для гибкой и поддерживаемой работы с событиями в современных веб-приложениях.