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

События в DOM имеют три фазы: захвата, цели и всплытия.

1. Фаза захвата (capturing) - событие движется от window вниз к целевому элементу. Редко используется, нужно явно указать {capture: true} в addEventListener.

2. Фаза цели (target) - событие достигло целевого элемента.

3. Фаза всплытия (bubbling) - событие поднимается от целевого элемента вверх. По умолчанию обработчики срабатывают здесь.

Пример:

// Захват
elem.addEventListener('click', handler, {capture: true});

// Всплытие (по умолчанию)
elem.addEventListener('click', handler); 
// или 
elem.addEventListener('click', handler, false);

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