В чем разница между всплытием и захватом событий? Когда следует использовать пузыри против захвата?
javascript
dom-events
event-bubbling
Арун П Джонни
источник
источник
Ответы:
Пузырьки и захват событий - это два способа распространения событий в API DOM HTML, когда событие происходит в элементе внутри другого элемента, и оба элемента зарегистрировали дескриптор этого события. Режим распространения события определяет, в каком порядке элементы получают событие .
При пузырьковании событие сначала захватывается и обрабатывается самым внутренним элементом, а затем распространяется на внешние элементы.
При захвате событие сначала захватывается самым внешним элементом и распространяется на внутренние элементы.
Захват также называется «каплей», что помогает запомнить порядок распространения:
В прежние времена Netscape выступал за захват событий, в то время как Microsoft поощряла всплытие событий. Оба являются частью стандарта событий объектной модели документа W3C (2000).
IE <9 использует только всплывающие события , а IE9 + и все основные браузеры поддерживают оба. С другой стороны, производительность всплытия событий может быть немного ниже всплывающих для сложных DOM.
Мы можем использовать
addEventListener(type, listener, useCapture)
для регистрации обработчиков событий либо в режиме пузырьков (по умолчанию), либо в режиме захвата. Чтобы использовать модель захвата, передайте третий аргумент какtrue
.пример
В приведенной выше структуре предположим, что в
li
элементе произошло событие щелчка .В модели захвата событие будет обрабатываться
div
сначала (сначалаdiv
будут срабатывать обработчики щелчка в событии ), затем вul
, затем в последнем в целевом элементеli
.В пузырьковой модели произойдет обратное: сначала событие будет обрабатываться элементом
li
, затем элементомul
и, наконец,div
элементом.Для получения дополнительной информации см.
В приведенном ниже примере, если вы щелкнете по любому из выделенных элементов, вы увидите, что сначала происходит фаза захвата потока распространения события, а затем фаза пузырьков.
Еще один пример на JSFiddle .
источник
useCapture
теперь поддерживается в IE> = 9. sourcetriclkling
же, какcapturing
? Крокфорд рассказываетTrickling v. Bubbling
в этом видеообращении - youtube.com/watch?v=Fv9qT9joc0M&list=PL7664379246A246CB вокруг1 hr 5 minutes
.trickle down
= =onElement
=>bubble up
Описание:
quirksmode.org имеет хорошее описание этого. В двух словах (скопировано из quirksmode):
Что использовать?
Это зависит от того, что вы хотите сделать. Там нет лучше. Разница заключается в порядке выполнения обработчиков событий. Большую часть времени будет нормально запускать обработчики событий в фазе пузырьков, но может также потребоваться запускать их раньше.
источник
Если есть два элемента, элемент 1 и элемент 2. Элемент 2 находится внутри элемента 1, и мы присоединяем обработчик событий к обоим элементам, скажем, onClick. Теперь, когда мы нажмем на элемент 2, будет выполнен eventHandler для обоих элементов. Теперь здесь вопрос в том, в каком порядке будет выполняться событие. Если событие, связанное с элементом 1, выполняется первым, это называется захватом события, а если событие, связанное с элементом 2, выполняется первым, это называется всплывающим событием. Согласно W3C, событие начнется в фазе захвата, пока не достигнет цели, вернется к элементу, а затем начнет пузыриться.
Состояния захвата и всплытия известны параметром useCapture метода addEventListener.
По умолчанию useCapture имеет значение false. Это означает, что он находится в пузырчатой фазе.
Пожалуйста, попробуйте изменить true и false.
источник
the event will start in the capturing phase untill it reaches the target comes back to the element and then it starts bubbling
. Я только обнаружил, что addEventListener имеет параметр,useCapture
который может быть установлен в true или false; а в HTML 4.0 слушатели событий были указаны как атрибуты элемента иuseCapture defaults to false
. Не могли бы вы дать ссылку на спецификацию, которая подтверждает то, что вы написали?Я нашел этот учебник на javascript.info очень ясным в объяснении этой темы. И его резюме из 3 пунктов в конце действительно говорит о важных моментах. Я цитирую это здесь:
источник
Также есть
Event.eventPhase
свойство, которое может сообщить вам, находится ли событие в назначении или откуда-то еще.Обратите внимание, что совместимость браузера еще не определена. Я тестировал его на Chrome (66.0.3359.181) и Firefox (59.0.3), и он там поддерживается.
Расширяя и без того отличный фрагмент из принятого ответа , это вывод с использованием
eventPhase
свойстваисточник
кипение
Capturing
источник