Как фазы событий связаны с порядком срабатывания обработчиков

В DOM события распространяются в трех фазах:

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

Обработчики срабатывают в порядке фаз. При добавлении через addEventListener третий параметр определяет фазу:

• true - обработчик сработает на фазе capture
• false (по умолчанию) - на фазе bubble

parent.addEventListener('click', () => console.log('Capture'), true);
child.addEventListener('click', () => console.log('Target'));
parent.addEventListener('click', () => console.log('Bubble'));
// При клике на child выведет: Capture → Target → Bubble

Можно остановить распространение через event.stopPropagation(), но это считается плохой практикой.