Difference between true and false in javascript eventlistener
I have a doubt about the concept of eventlistener. What is the difference between the two codes I doubt the true / false section. Changes happen when I replace the first code with the second code in my practice code.
a.addEventListener("click", modifyText, true);
a.addEventListener("click", modifyText, false);
source to share
true and false in addEventListener
is a Boolean that indicates whether the event should be logged or not.
Here's the syntax and detail :
object.addEventListener (eventName, function, useCapture);
eventName: A string specifying the name of the event to listen to. This parameter is case sensitive!
function: Represents an event listener function to be called when an event occurs. When an event occurs, the event object is initialized and passed to the event handler as the first parameter. The type of event object depends on the current event.
useCapture: A Boolean value indicating whether the event should be logged or not. One of the following values:
false -> Register the event handler for the bubbling phase.
true -> Register the event handler for the capturing phase.
Bubbling and Capturing phases:
bubbling: The event object propagates through target ancestors in reverse order, starting with the target parent and ending with the standard view. This phase is also known as the bubbling phase. Event listeners registered for this phase must handle the event after the goal has been reached.
capture: the event object should propagate through target ancestors from defaultView to target parent. This phase is also known as the capture phase. Event listeners registered for this phase must process the event before it reaches its target.
More on event flow: DOM Event Architecture
source to share
Just take a look at some document for example. MDN ataddEventListener
:
target.addEventListener(type, listener[, useCapture]);
useCapture
If true, useCapture indicates that the user wants to initiate a capture. Once capturing begins, all events of the specified type will be dispatched to the registered listener before dispatching to any EventTarget below it in the DOM tree. Events that bubble up through the tree will not trigger the listener assigned to use the capture. See DOM Level 3 Events for a detailed explanation. Please note that this parameter is optional in all browser versions. If not specified, useCapture is false.
So it basically decides if the event is handled in the capture or bubble phase of event handling.
As long as neither parent (or child) of an element has any similar events, there is no real difference.
source to share