Подробный ответ

Распространение события в JavaScript определяет, как события перемещаются по дереву DOM от исходного элемента, на котором произошло событие, к его родительским элементам. Этот процесс состоит из трех фаз: захват, целевая фаза и всплытие.

В фазе захвата (capturing phase) событие сначала проходит от корневого элемента документа вниз по дереву DOM к целевому элементу. На этом этапе можно использовать метод addEventListener с третьим аргументом, установленным в true, чтобы указать, что обработчик события должен срабатывать на этапе захвата.

Целевая фаза (target phase) — это момент, когда событие достигает непосредственно того элемента, на котором оно было вызвано. В этот момент выполняются обработчики событий, прикрепленные непосредственно к целевому элементу.

В фазе всплытия (bubbling phase) событие проходит от целевого элемента вверх по дереву DOM к корневому элементу. По умолчанию обработчики событий срабатывают в этой фазе, если не указано иное.

Пример использования фаз захвата и всплытия: