Изучая программную инженерию, вы можете в первую очередь услышать об объектной модели документа (сокращенно DOM). Вкратце, DOM представляет собой абстрактную иерархизированную версию элементов в документе HTML / XML, где «корнем» является сам документ. От этого корня «ответвляются» другие элементы в зависимости от того, как элементы, атрибуты и другие качества вложены в документ. Обратите внимание на изображение выше и сравните его с эквивалентом в коде:

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

Пузырьки событий:

Обратите внимание, что есть три элемента - один вложен внутрь другого - каждый с одним и тем же типом обработчика событий («onClick»). Если бы это было на странице и пользователь щелкнул элемент button, какое предупреждение вы бы увидели: предупреждение кнопки, предупреждение диапазона или предупреждение div?

Ответ: Все три в указанном порядке! Нажатие кнопки вызовет предупреждение кнопки, затем предупреждение диапазона и наконец предупреждение div! Причина этого - всплытие событий, которое, согласно Википедии, следующее:

Возврат событий - это тип распространения события, при котором событие сначала запускается на самом внутреннем целевом элементе, а затем последовательно запускается на предках (родителях) целевого элемента в той же иерархии вложенности, пока не достигнет самый внешний элемент «DOM или объект документа ».

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

Как остановить всплытие событий?

Есть несколько быстрых способов сделать так, чтобы ваши события не всплывали. Один из способов - убедиться, что родительский элемент не имеет того же обработчика событий, что и его дочерний элемент. В приведенном выше примере кода, если ни один из элементов ‹div› или ‹span› не имеет типа события onClick, нажатие на элемент ‹button› не приведет к срабатыванию предупреждений его родителей. Однако это может быть не идеально, если все элементы должны иметь одинаковый тип события.

Так что делать?

К счастью, есть два очень похожих метода, которые можно запустить, чтобы остановить всплытие (или распространение событий): .stopPropagation () и . stopImmediatePropagation (). Давайте добавим первое в наш код и посмотрим, что он делает:

После добавления этого метода только предупреждение, которое мы увидим, будет прикреплено к кнопке. Более подробно, e (событие) останавливает распространение триггера события от продвижения вверх по цепочке. Доллар останавливается там!

e.stopImmediatePropagation () делает то же самое, но делает еще один шаг вперед: .stopImmediatePropagation () остановит всплытие всех событий, запускаемых элементом. Например, если все элементы в нашем коде имеют дополнительное событие «onClick», использование .stopPropagation () только остановит всплытие одного из этих событий, но не остановит другое. stopImmediatePropagation () останавливает все из них.

Захват событий:

Здесь мы не будем слишком подробно рассматривать захват событий, отчасти потому, что он редко используется. По сути, это противоположность всплыванию событий, когда событие распространяется вниз от самого внешнего элемента к цели. Захват происходит каждый раз, когда запускается событие, но обычно ничего не запрашивает, если это явно не указано в нашем коде. Жизненный цикл триггера события можно резюмировать следующим образом:

Захват событий = ›Таргетинг на события =› Пузырьки событий

EC запускает цикл событий с самого верхнего элемента (скажем, ‹html›) и переходит к цели события (‹button›). После этого цель события распространяет событие от цели события до самого внешнего элемента (фаза восходящей цепочки событий). Есть даже метод, который позволит вам сосредоточиться на определенной части фазы: .eventPhase (). Возвращаемое значение «0», «1», «2» или «3» сообщит вам, не находится ли событие в какой-либо фазе, фазе захвата, целевой фазе или фазе всплытия, соответственно. .

Заключительные примечания:

Всплывающее событие может удивить вас, когда вы впервые столкнетесь с ним. Вы можете задаться вопросом, почему ваше событие в вашем теге ‹div› срабатывает, когда вы инициализируете событие ‹img›. Как обсуждалось, вы можете быстро исправить это, убедившись, что родительские и дочерние элементы не имеют общих типов событий (таких как «onClick» или «onChange»), но если это не вариант, вытащите один из этих методов распространения, чтобы остановить событие в своей цели!

Еще одна вещь: Большинство событий всплывают, но небольшое количество - нет, например,« фокус ».

Надеюсь, это вам помогло. Удачного кодирования!