Зачем нужны три фазы событий

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

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

Это позволяет гибко обрабатывать события на разных уровнях DOM. Например:

document.addEventListener('click', () => console.log('Захват'), true); // фаза захвата
element.addEventListener('click', () => console.log('Цель')); // фаза цели
document.addEventListener('click', () => console.log('Всплытие')); // фаза всплытия

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