CODEWITHSUNDEEP
javascripteventsdom
HelloWorld
HelloWorld

Reputation: 11257

Event Listener Capture and Bubbling Phase Events

I have had this question in my mind for a while after reading many tutorials and posts on SO, none have been able to give me the mental model needed to get past this block.

Here is an excerpt from a terrific blog post about the Browser Events:

When we click the anchor tag, the DOM calculates the Capture Phase path, firing all the Capture Phase event handlers of the root document, body, div and anchor tags (in that order), and then it turns around and fires all of the Bubble Phase event handlers in the reverse order of the Capture Phase.

Here is the snippet of code described in the quote:

<html>
  <head>
  </head>
  <body>
    <div id="myDiv">
      <a id="myAnchor" 
         href="http://bitovi.com/">bitovi!
      </a>
    </div>
  </body>
</html>

Here is what I don't understand. Many explanations talk about the Capture and Bubble phases as walking down and up the DOM, which I understand. I don't understand how "all" the events are fired while walking down the tree in the capture phase and then all the bubble events are fired going up the tree. What is "all" a reference to? Is it all the events on the page? Are they fired "silently" and since they aren't where the actual click event occurred they don't execute, the only event actually fired is the element that was clicked, the rest of the events are just stored for some reason?

Later in the blog post, this other explanation also confuses me and is related to my misunderstanding about the reference to "all the events":

This is describing what happens during the Execution of the Capture Phase Events:

Now, we loop through all of the elements that we just collected (and flipped around). A few things we need to do here:

  • We need to check if event.stopPropagation() was called by one of the event handlers fired (see the last step of this bulleted list). If it was, just break out of this loop – we don’t need to iterate through the rest of the list.

  • Next, we check to see if there were any Capture Phase event handlers set for the DOM node currently being evaluated.

  • Finally, loop through all of the handlers we collected and execute them in the context of the node currently being evaluated.

I'm confused by the last two bullet points. "Check if any Capture Phase event handlers set for the DOM node currently being evaluated". I generally understand how the event handlers are set with the addEventListener method. Here is where the confusion is:

"Loop through all of the handlers that were collected and execute them in the context of the node currently being evaluated".

Are all the handlers on the page collected and executed? If the event had the stop.prop event or did was not set on the dom node the event was triggered on, will the event not fire?

Sorry if this question is confusing, I will try to clarify anything that does not make sense. Thanks!

Upvotes: 0

Views: 563

Answers (1)

Alohci
Alohci

Reputation: 83006

Not all the events, all the event handlers¹. There's only one event fired in the description, a single click event. That event is passed to each event listener attached to the elements identified in the capture/bubble chain, unless it is stopped from doing so by stopPropagation() (or stopImmediatePropagation()).

¹ Pedantically, they are event listeners. Event handlers "act as non-capture event listeners for the object on which they are specified."

Upvotes: 1

Related Questions