Что такое всплытие в JavaScript?

Механизм, при котором событие, инициированное на элементе DOM, распространяется "вверх" по иерархии к его родительским элементам вплоть до корня (document). По умолчанию большинство событий проходит через три фазы:

1. Фаза захвата (Capturing phase): Событие движется вниз от корня к целевому элементу. Слушатели событий, прикрепленные с опцией { capture: true }, срабатывают на этой фазе.
2. Фаза цели (Target phase): Событие достигает целевого элемента, на котором оно было инициировано. Слушатели, прикрепленные непосредственно к этому элементу, срабатывают.
3. Фаза всплытия (Bubbling phase): Событие движется вверх от целевого элемента к корню документа. Слушатели событий, прикрепленные по умолчанию (без { capture: true } или с { capture: false }), срабатывают на этой фазе. Это фаза, в которой происходит "всплытие" в классическом понимании.

Всплытие позволяет реализовать делегирование событий, когда один слушатель на родительском элементе обрабатывает события со множества дочерних элементов.

Пример:

javascript

Метод event.stopPropagation() может быть использован для остановки дальнейшего распространения события (как всплытия, так и захвата) после того, как оно было обработано текущим слушателем. Метод event.stopImmediatePropagation() останавливает всплытие и не дает другим слушателям на том же элементе сработать. event.preventDefault() предотвращает стандартное действие браузера, связанное с событием, но не останавливает его распространение.