Всплытие и перехват событий в JavaScript (Bubbling, Capturing)

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

Фазы распространения события

1. Capturing Phase (фаза захвата) — событие сначала проходит через все родительские элементы от самого верхнего (root) до целевого элемента.
2. Target Phase (фаза цели) — событие достигает самого целевого элемента, на котором оно было инициировано.
3. Bubbling Phase (фаза всплытия) — событие начинает "всплывать" обратно от целевого элемента до самых верхних элементов в DOM.

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

<div id="parent">
  <button id="child">Click me!</button>
</div>

Пример работы:

• Capturing Phase: Когда пользователь кликает на кнопку, событие сначала попадает на элемент parent, где срабатывает первый обработчик.
• Target Phase: Событие достигает элемента child (цель события), где срабатывает второй обработчик.
• Bubbling Phase: Событие затем начинает всплывать обратно, и срабатывает третий обработчик на элементе parent.

Как управлять фазами

• Слушатели событий можно настроить так, чтобы они работали либо в фазе захвата, либо в фазе всплытия, в зависимости от того, в какой фазе вы хотите перехватывать событие.
• Важно помнить, что событие не всегда должно всплывать или захватываться. Например, можно использовать event.stopPropagation() для того, чтобы остановить дальнейшее распространение события, будь то в фазе захвата или всплытия.