Для чего ложь в конце? Спасибо.
window.addEventListener('load', function() {
alert("All done");
}, false);
javascript
0x499602D2
источник
источник
Я тоже проверил MDN, но до сих пор не понял, для чего
useCaptureон нужен, поэтому этот ответ предназначен для тех, кто все еще не понимает его после проверки официальной документации.Итак, во-первых, почти во всех браузерах происходит следующее:
Это означает, что независимо от того, что вы установили
useCapture, эти две фазы событий существуют всегда.На этой картинке показано, как это работает.
Тогда возникает ваш вопрос. Третий вызываемый параметр
useCaptureуказывает, на какой из двух фаз вы хотите, чтобы ваш обработчик обработал событие.что означает, что если вы напишете такой код:
child.addEventListener("click", second); parent.addEventListener("click", first, true);при щелчке по дочернему элементу
firstметод будет вызван раньшеsecond.По умолчанию для
useCaptureфлага установлено значение false, что означает, что ваш обработчик будет вызываться только во время фазы восходящей цепочки событий .Для получения подробной информации щелкните эту справочную ссылку и это .
источник
@ Весов ответ очень хорош, просто есть люди вроде меня, которые лучше понимают взаимодействие кода с машиной.
Итак, следующий сценарий должен объяснять распространение события. На основе этой схемы описания я пытаюсь сделать следующее :
Следуя потоку событий вниз и вверх по следующей иерархии:
<window> <document> <body> <section> <div> <paragraph> <span>Для простоты мы начнем с тела до обработчиков регистрации элемента span для фазы захвата и вернемся к обработчикам регистрации элемента body для фазы восходящей цепочки. Таким образом, результатом будет узел за узлом, направление, принятое событием от начала до конца. Нажмите "Показать консоль" на правой панели фрагмента, чтобы получить доступ к журналам.
function handler(e){ /* logs messages of each phase of the event flow associated with the actual node where the flow was passing by */ if ( e.eventPhase == Event.CAPTURING_PHASE ){ console.log ("capturing phase :\n actual node : "+this.nodeName); } if ( e.eventPhase == Event.AT_TARGET){ console.log( "at target phase :\n actual node : "+this.nodeName); } if ( e.eventPhase == Event.BUBBLING_PHASE){ console.log ("bubbling phase :\n actual node : "+this.nodeName ); } } /* The following array contains the elements between the target (span and you can click also on the paragraph) and its ancestors up to the BODY element, it can still go up to the "document" then the "window" element, for the sake of simplicity it is chosen to stop here at the body element */ arr=[document.body,document.getElementById("sectionID"), document.getElementById("DivId"),document.getElementById("PId"), document.getElementById("spanId")]; /* Then trying to register handelers for both capturing and bubbling phases */ function listener(node){ node.addEventListener( ev, handler, bool ) /* ev :event (click), handler : logging the event associated with the target, bool: capturing/bubbling phase */ } ev="click"; bool=true; // Capturing phase arr.forEach(listener); bool=false; // Bubbling phase /* Notice that both capturing and bubbling include the at_target phase, that's why you'll get two `at_target` phases in the log */ arr.forEach(listener);p { background: gray; color:white; padding: 10px; margin: 5px; border: thin solid black } span { background: white; color: black; padding: 2px; cursor: default; }<section ID="sectionID"> <div id="DivId"> <p id="PId"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq. </p> </div> </section>Обратите внимание, что такие события, как фокус, не всплывают, поэтому кажется, что большинство событий всплывают.
источник