Справочник · JavaScript

addEventListener(): реагируем на события

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

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

Минимальный пример

const button = document.querySelector('.theme-toggle');

button.addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

При каждом клике у body переключается класс dark. Если элемента с классом theme-toggle на странице нет, querySelector вернёт null, и строка с addEventListener упадёт с ошибкой — проверяй результат поиска.

Синтаксис и параметры

target.addEventListener(type, listener, options);

Частые события

Объект события

form.addEventListener('submit', (event) => {
  event.preventDefault();          // не перезагружать страницу
  const data = new FormData(event.currentTarget);
  console.log(data.get('email'));
});

Обработчик получает объект события. Главное в нём: event.target — элемент, где событие возникло; event.currentTarget — элемент, на котором висит обработчик; event.preventDefault() — отменить действие браузера (отправку формы, переход по ссылке); event.key — клавиша для клавиатурных событий.

Всплытие: target и currentTarget

Событие сначала происходит на самом глубоком элементе, а потом поднимается по предкам до document — это всплытие. Клик по иконке внутри кнопки сработает и на иконке, и на кнопке, и на списке. Поэтому event.target может оказаться иконкой svg, а event.currentTarget — кнопкой, к которой привязан обработчик.

event.stopPropagation() останавливает всплытие, но применяй его редко: другие обработчики выше (аналитика, закрытие меню по клику снаружи) перестанут узнавать о событии.

Делегирование событий

const list = document.querySelector('.tasks');

list.addEventListener('click', (event) => {
  const button = event.target.closest('[data-delete]');
  if (!button) return;              // клик не по кнопке удаления
  button.closest('li').remove();
});

Вместо обработчика на каждой кнопке — один на родителе. Это работает и для элементов, добавленных позже, и экономит память на длинных списках. closest поднимается от места клика к нужной кнопке, даже если кликнули по иконке внутри неё.

Как удалить обработчик

function onKey(event) {
  if (event.key === 'Escape') closeModal();
}
document.addEventListener('keydown', onKey);
document.removeEventListener('keydown', onKey);

// группа обработчиков снимается одним вызовом
const controller = new AbortController();
window.addEventListener('resize', onResize, { signal: controller.signal });
window.addEventListener('scroll', onScroll, { signal: controller.signal, passive: true });
controller.abort();

removeEventListener снимает обработчик, только если передать ту же самую функцию и то же значение capture. Анонимную стрелку удалить нельзя: () => {} каждый раз создаёт новую функцию. Параметр signal удобнее, когда подписок несколько.

this внутри обработчика

В обычной функции-обработчике this равен элементу, на котором висит обработчик (то же, что event.currentTarget). В стрелочной функции своего this нет — он берётся снаружи. Чтобы не путаться, используй event.currentTarget: он работает одинаково в любой функции.

addEventListener или onclick

Частые ошибки

• Передают вызов вместо функции: addEventListener('click', handleClick()) выполнит её сразу.
• Пишут имя события с «on»: 'onclick' вместо 'click'.
• Не проверяют, найден ли элемент, и получают Cannot read properties of null.
• Вешают submit на кнопку вместо формы и забывают preventDefault.
• Добавляют обработчик при каждом рендере списка, и клик срабатывает несколько раз.

Доступность

Вешай click на настоящую button или ссылку: они получают фокус и срабатывают по Enter и пробелу. Клик на div не работает с клавиатуры. Если для действия нужна клавиатура (закрыть окно по Escape), слушай keydown на document. Не отменяй через preventDefault стандартное поведение без замены — например, переход по ссылке.

Поддержка браузерами

addEventListener работает во всех браузерах. Объект параметров с once, passive и capture поддерживается всеми актуальными браузерами, параметр signal — тоже, начиная с версий 2021 года.

document.querySelector('.tasks').addEventListener('click', (event) => {
  const button = event.target.closest('[data-delete]');
  if (button) button.closest('li').remove();
});

document.querySelector('.hint').addEventListener('click', () => {
  document.querySelector('.hint-text').hidden = false;
}, { once: true });