Why is 'false' used after this simple addEventListener function?
JavascriptJavascript Problem Overview
What is the false for at the end? Thanks.
window.addEventListener('load', function() {
alert("All done");
}, false);
Javascript Solutions
Solution 1 - Javascript
I checked MDN too, but I still didn't understand what the useCapture was for, so this answer is for those who still don't get it after having checked the official documentation.
So first of all, the following happens in almost all browers: >In all browsers, except IE<9, there are two stages of event processing. > >The event first goes down - that’s called capturing, and then bubbles up . This behavior is standartized in W3C specification.
which means no matter what you set the useCapture to, these two event phases always exist.
This picture shows how it works.
>According to this model, the event: > >Captures down - through 1 -> 2 -> 3. > >Bubbles up - through 3 -> 2 -> 1.
Then comes your question. The 3rd param called useCapture indicates on which of the two phases you want your handler to handle the event.
>useCapture = true
>
>The handler is set on the capturing phase. Events will get to it before getting to its children.
>
>useCapture = false.
>
>The handler is set on the bubbling phase. Events will get to it after getting to its children.
which means that if you write code like this:
child.addEventListener("click", second);
parent.addEventListener("click", first, true);
when clicking child element, first method will be called before second.
By default, the useCapture flag is set to false which means you handler will only be called during event bubbling phase.
For detailed info, click this reference link and this.
Solution 2 - Javascript
According to MDN Web Docs, the third parameter is:
> useCapture
> If true, useCapture indicates that the user wishes to
> initiate capture. After initiating
> capture, all events of the specified
> type will be dispatched to the
> registered listener before being
> dispatched to any EventTargets beneath
> it in the DOM tree. Events which are
> bubbling upward through the tree will
> not trigger a listener designated to
> use capture. See DOM Level 3 Events
> for a detailed explanation.
Solution 3 - Javascript
@Libra's answer is very good, there just happen to be some people like me who understand better the interaction of the code with the machine.
So the following script should be explaining the event propagation.
What I'm trying to do based this description schema is :
Following event flow down and up the following hierarchy :
<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>
For the sake of simplicity we'll start at the body down to the span element registering handlers for the capturing phase, and back up to the body element registering handlers for the bubbling phase. So the result would be node by node the direction taken by the event from the start to the end. Please click "Show console " on the right panel of the snippet to access the logs
<!-- language: lang-js -->
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);
<!-- language: lang-html -->
<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>
<!-- language: lang-css -->
p {
background: gray;
color:white;
padding: 10px;
margin: 5px;
border: thin solid black
}
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}
<!-- end snippet -->
Notice that events such as focus don't bubble, which makes sens still he majority of events do bubble.