Невозможно понять параметр useCapture в addEventListener

Я прочитал статью на https://developer.mozilla.org/en/DOM/element.addEventListener, но не смог понять атрибут useCapture . Определение:

Если true, useCapture указывает, что пользователь хочет начать захват. После начала захвата все события указанного типа будут отправлены зарегистрированному прослушивателю перед отправкой на любые EventTargets под ним в дереве DOM. События, которые пузырятся вверх через дерево, не будут вызывать слушателя, назначенного для использования захвата.

В этом родительском событии кода триггеры перед дочерним элементом, поэтому я не могу понять его поведение. Объект документа имеет usecapture true, а дочерний div имеет значение usecapture set false и documentececure document. Поэтому свойство документа предпочтительнее дочернего.

 function load() { document.addEventListener("click", function() { alert("parent event"); }, true); document.getElementById("div1").addEventListener("click", function() { alert("child event"); }, false); } 
  
click me

События можно активировать в двух случаях: в начале («захват») и в конце («пузырь»). События выполняются в порядке их определения. Скажем, вы определяете 4 прослушивателя событий:

 window.addEventListener("click", function(){alert(1)}, false); window.addEventListener("click", function(){alert(2)}, true); window.addEventListener("click", function(){alert(3)}, false); window.addEventListener("click", function(){alert(4)}, true); 

Я считаю, что эта диаграмма очень полезна для понимания фаз захвата / цели / пузырьков: http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

Ниже приведен контент, выделенный из ссылки.

Этапы

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

  1. Фаза захвата: событие отправляется предкам цели из корня дерева в прямой родительский узел целевого узла.
  2. Целевая фаза: событие отправляется на целевой узел.
  3. Фаза барботирования: событие отправляется предкам цели из прямого родителя целевого узла в корень дерева.

графическое представление события, отправленного в дереве DOM с использованием потока событий DOM

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

Некоторые события могут не обязательно выполнять три фазы streamа событий DOM, например, событие может быть определено только для одной или двух фаз. Например, события, определенные в этой спецификации, всегда будут выполнять фазы захвата и цели, но некоторые из них не будут выполнять этап барботирования («события барботирования» по сравнению с «событиями, не связанными с пузырьками», см. Также атрибут Event.bubbles).

Событие Capture Event или Bubble Event

  • Событие Capture будет отправлено до Bubble Event
  • Порядок распространения событий
    1. Родительский захват
    2. Захват детей
    3. Детский пузырь
    4. Родительский пузырь

( stopPropagation() остановит stream)

  | A -----------------|--|----------------- | Parent | | | | -------------|--|----------- | | |Children V | | | | ---------------------------- | | | -------------------------------------- 

демонстрация

 var parent = document.getElementById('parent'), child = document.getElementById('child'); child.addEventListener('click', function(e){ console.log('Child Capture, with capture'); // e.stopPropagation(); }, true); child.addEventListener('click', function(e){ console.log('Child Bubble'); // e.stopPropagation(); }, false); parent.addEventListener('click', function(e){ console.log('Parent Capture, with capture'); // e.stopPropagation(); }, true); parent.addEventListener('click', function(e){ console.log('Parent Bubble'); // e.stopPropagation(); }, false); 
 

Когда вы говорите, что useCapture = true, события выполняются сверху вниз в фазе захвата, когда false, это делает пузырь внизу.

Пример кода:

 
Outer Div
Inner Div

Код Javascript:

 d1 = document.getElementById("div1"); d2 = document.getElementById("div2"); 

если для обоих установлено значение false

 d1.addEventListener('click',function(){alert("Div 1")},false); d2.addEventListener('click',function(){alert("Div 2")},false); 

Выполняет: Onclicking Inner Div, предупреждения отображаются как: Div 2> Div 1

Здесь сценарий выполняется из внутреннего элемента: Event Bubbling (useCapture имеет значение false)

div 1 установлено в true, а div 2 – false

 d1.addEventListener('click',function(){alert("Div 1")},true); d2.addEventListener('click',function(){alert("Div 2")},false); 

Выполняет: Onclicking Inner Div, предупреждения отображаются как: Div 1> Div 2

Здесь сценарий выполняется из предка / внешнего элемента: Event Capturing (useCapture имеет значение true)

div 1 устанавливается в false, а div 2 – true

 d1.addEventListener('click',function(){alert("Div 1")},false); d2.addEventListener('click',function(){alert("Div 2")},true); 

Выполняет: Onclicking Inner Div, предупреждения отображаются как: Div 2> Div 1

Здесь сценарий выполняется из внутреннего элемента: Event Bubbling (useCapture имеет значение false)

div 1 устанавливается в true, а div 2 – true

 d1.addEventListener('click',function(){alert("Div 1")},true); d2.addEventListener('click',function(){alert("Div 2")},true); 

Выполняет: Onclicking Inner Div, предупреждения отображаются как: Div 1> Div 2

Здесь сценарий выполняется из предка / внешнего элемента: Event Capturing, поскольку useCapture имеет значение true

Все о моделях событий: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow. Вы можете поймать событие в фазе барботирования или в фазе захвата. Твой выбор.
Взгляните на http://www.quirksmode.org/js/events_order.html – вы найдете его очень полезным.

Учитывая три этапа путешествия событий:

  1. Фаза захвата : событие отправляется предкам цели из корня дерева в прямой родительский узел целевого узла.
  2. Целевая фаза : событие отправляется на целевой узел.
  3. Фаза барботирования : событие отправляется предкам цели из прямого родителя целевого узла в корень дерева.

useCapture указывает, на каких этапах будет происходить перемещение события:

Если true , useCapture указывает, что пользователь хочет добавить прослушиватель событий только для фазы захвата, т. Е. Этот прослушиватель событий не будет запущен во время фаз мишени и пузырьков. Если false , прослушиватель событий запускается только во время фаз мишени и пузырьков

Источник совпадает с вторым лучшим ответом: https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

Порядок определения имеет значение только в том случае, если предметы находятся на одном уровне. Если вы измените порядок определения в своем коде, вы получите те же результаты.

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

Если вы установите для useCapture значение true для обоих обработчиков событий – независимо от порядка определения – родительский обработчик событий будет запущен первым, потому что он доходит до ребенка на этапе захвата.

И наоборот, если вы установите для параметра useCapture значение false для обоих обработчиков событий – опять же, независимо от порядка определения – обработчик дочерних событий будет запускаться первым, потому что он приходит перед родителем в фазе барботажа.

Резюме:

Спецификация DOM описана в:

https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

работает следующим образом:

Событие отправляется по пути от корня ( document ) дерева к целевому узлу . Целевой узел – это самый глубокий элемент HTML , то есть event.target. Рассылка события (также называемая событием) происходит в три этапа и следующий порядок:

  1. Фаза захвата: событие отправляется предкам цели из корня дерева ( document ) прямому родительскому узлу целевого узла.
  2. Целевая фаза: событие отправляется на целевой узел. Целевая фаза всегда находится в самом глубоком html элементе, на котором было отправлено событие.
  3. Фаза барботирования: событие отправляется предкам цели из прямого родителя целевого узла в корень дерева.

Банкротство событий, захват событий, цель события

Пример:

 // bubbling handlers, third argument (useCapture) false (default) document.getElementById('outerBubble').addEventListener('click', () => { console.log('outerBubble'); }, false) document.getElementById('innerBubble').addEventListener('click', () => { console.log('innerBubble'); }, false) // capturing handlers, third argument (useCapture) true document.getElementById('outerCapture').addEventListener('click', () => { console.log('outerCapture'); }, true) document.getElementById('innerCapture').addEventListener('click', () => { console.log('innerCapture'); }, true) 
 div:hover{ color: red; cursor: pointer; } 
  
click me to see Bubbling
click me to see Capturing
  • Как определить создание нового элемента в jQuery?
  • Как удалить «onclick» с помощью JQuery?
  • Прослушивание переменных изменений в JavaScript
  • Как инициировать событие после использования event.preventDefault ()
  • jQuery читать stream AJAX постепенно?
  • Как отлаживать привязки событий JavaScript / jQuery к Firebug или аналогичным инструментам?
  • Что такое параметр e (событие) и зачем передавать его функции JavaScript?
  • Как передать значения аргументам функции modal.show () в Bootstrap
  • Найти прикрепленные / связанные события элемента с помощью инструментов разработки Chrome / Firebug / IE
  • Как вызвать метод Objective C из Javascript и отправить данные в Javascript в iOS?
  • jQuery - событие Fire, если class CSS изменен
  • Давайте будем гением компьютера.