Пузырение и захват – это 2 модели, которые события DOM используют для распространения.
Предположим, что ваша структура DOM такова
Вы хотите отслеживать, когда пользователи нажимают на кнопку , и у вас есть 2 прослушивателя событий, один на кнопке и один на #контейнере .
Помните, что щелчок по дочернему элементу всегда будет распространяться на его родителей, если вы не остановите распространение (см. Позже).
Эти прослушиватели событий будут вызываться по порядку, и этот порядок определяется используемой моделью обработки/захвата событий.
Пузырящийся означает, что событие распространяется от элемента, на который был нажат (дочерний элемент), до всего его родительского дерева, начиная с ближайшего.
В нашем примере обработчик на кнопке сработает перед обработчиком #контейнера .
Захват противоположен: внешние обработчики событий запускаются перед более конкретным обработчиком, который находится на кнопке .
По умолчанию все события всплывают .
Вы можете выбрать захват событий, применив третий аргумент к addEventListener , установив для него значение true :
document.getElementById('container').addEventListener(
'click',
() => {
//window loaded
},
true
)Обратите внимание, что сначала запускаются все обработчики событий захвата .
Затем все бурлящие обработчики событий.
Порядок следует этому принципу: DOM просматривает все элементы, начиная с объекта Window, и переходит к поиску элемента, на который был нажат. При этом он вызывает любой обработчик событий, связанный с событием (фаза захвата).
Как только он достигает цели, он затем повторяет путь до родительского дерева до объекта Window, снова вызывая обработчики событий (фаза пузырьков).
Оригинал: “https://flaviocopes.com/javascript-event-bubbling-capturing/”