Как повесить обработчик на DOM-элемент через addEventListener и для чего нужен его третий аргумент?

События в DOM распространяются в три фазы: погружение (capturing) от корня к цели, достижение цели (target) и всплытие (bubbling) от цели к корню. Метод addEventListener позволяет подписаться на любую из этих фаз и настроить поведение обработчика через третий аргумент.

Базовый синтаксис

const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
  console.log('clicked', event.target);
});

Первый аргумент — тип события, второй — функция-обработчик, третий — необязательные настройки.

Третий аргумент: boolean или объект

• boolean (useCapture): true — обработчик сработает на фазе погружения, false (по умолчанию) — на фазе всплытия.
• объект options:
  • capture — то же, что useCapture;
  • once — обработчик удалится после первого вызова;
  • passive — обещает, что обработчик не вызовет preventDefault, что улучшает производительность скролла;
  • signal — AbortSignal для автоматического снятия обработчика.

Пример с фазами

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.addEventListener('click', () => console.log('parent capture'), true);
child.addEventListener('click', () => console.log('child bubble'));
parent.addEventListener('click', () => console.log('parent bubble'));
// Клик по child: parent capture -> child bubble -> parent bubble

Практические сценарии

• once: true удобно для одноразовых действий, например, показа приветственного модального окна.
• passive: true применяют для touchstart и wheel, чтобы браузер не ждал обработчик перед скроллом.
• signal помогает массово снимать обработчики при размонтировании компонента.

Итог: используйте третий аргумент, когда нужно управлять фазой события или оптимизировать поведение обработчика; в простых случаях достаточно двух аргументов.