i have a doubt in eventlistener concept.What is the difference between bellow two codes i have doubt in the true/false section.no change happens when i replace the 1st code with the second code in my practice code.

a.addEventListener("click", modifyText, true);
a.addEventListener("click", modifyText, false);

i have a doubt in eventlistener concept.What is the difference between bellow two codes i have doubt in the true/false section.no change happens when i replace the 1st code with the second code in my practice code.

a.addEventListener("click", modifyText, true);
a.addEventListener("click", modifyText, false);

• javascript

2 Answers 2

true and false in addEventListener is Boolean that specifies whether the event needs to be captured or not.

Here's the syntax and detail:

object.addEventListener (eventName, function, useCapture);

eventName: String that specifies the name of the event to listen for. This parameter is case sensitive!

function: Represents the event listener function to be called when the event occurs. When an event occurs, an event object is initialized and passed to the event handler as the first parameter. The type of the event object depends on the current event.

useCapture: Boolean that specifies whether the event needs to be captured 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 the target's ancestors in reverse order, starting with the target's parent and ending with the defaultView. This phase is also known as the bubbling phase. Event listeners registered for this phase must handle the event after it has reached its target.

capturing: the event object must propagate through the target's ancestors from the defaultView to the target's parent. This phase is also known as the capturing phase. Event listeners registered for this phase must handle the event before it reaches its target.

For more detail on event flow: DOM Event Architecture

Just have a look at some docu, e.g. MDN on addEventListener:

target.addEventListener(type, listener[, useCapture]);

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 EventTarget 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. Note that this parameter is not optional in all browser versions. If not specified, useCapture is false.

So basically it decides whether the event is handled in the capture or the bubble phase of event processing.

As long as no of the element's parents (or children) have any similar events attached, there is no real difference.