Что такое распространение события

Распространение события (event propagation) в DOM происходит в три фазы:

1. Capture phase - событие движется от window до целевого элемента
2. Target phase - событие достигает целевого элемента
3. Bubble phase - событие всплывает от целевого элемента обратно до window

По умолчанию обработчики срабатывают на фазе всплытия (bubble). Можно перехватить событие на фазе захвата, используя третий параметр addEventListener:

element.addEventListener('click', handler, true); // capture phase

Пример остановки распространения:

element.addEventListener('click', (e) => {
  e.stopPropagation(); // останавливает всплытие
  // e.stopImmediatePropagation() - также предотвращает вызов других обработчиков
});

Понимание механизма распространения важно для правильной обработки событий, особенно при работе с вложенными элементами.