Как фазы событий помогают управлять порядком работы обработчиков

В DOM события распространяются в трех фазах: захвата (capturing), цели (target) и всплытия (bubbling). Это позволяет контролировать порядок выполнения обработчиков.

1. Захват – событие идет сверху вниз от window до целевого элемента. Обработчики с useCapture=true срабатывают первыми.
2. Цель – событие достигло целевого элемента.
3. Всплытие – событие поднимается вверх от целевого элемента. Обработчики без useCapture срабатывают здесь.

Пример:

parent.addEventListener('click', () => console.log('Capture'), true); // 1
child.addEventListener('click', () => console.log('Target')); // 2
parent.addEventListener('click', () => console.log('Bubble')); // 3

При клике на child порядок вывода: "Capture", "Target", "Bubble". Это позволяет, например, перехватывать события до дочерних элементов или обрабатывать их после.