I understand that an event has two modes -- bubbling and capturing.

When an event is set to bubble, does Javascript checks up to "document"?

When an event is set to capture, does Javascript always starts from "document"?

How does Javascript know where to stop/start?

Let's say I have the following code in my body tag.

<div id='outer'>
    <div id='inner'></div>
</div>

When I set an event to #inner to bubble, does Javascript check up to document or does it stop at #outer?

I understand that an event has two modes -- bubbling and capturing.

When an event is set to bubble, does Javascript checks up to "document"?

When an event is set to capture, does Javascript always starts from "document"?

How does Javascript know where to stop/start?

Let's say I have the following code in my body tag.

<div id='outer'>
    <div id='inner'></div>
</div>

When I set an event to #inner to bubble, does Javascript check up to document or does it stop at #outer?

• javascript
• dom-events
• event-bubbling

• 2 Very informative article from quirksmode: quirksmode/js/events_order.html – techfoobar Commented Sep 25, 2012 at 4:27
• 1 @techfoobar // i actually read that article, but it's not clear wether Javascript checkes up to document or stops at the parent element. – Moon Commented Sep 25, 2012 at 4:29
• 1 If it stopped at outer, how would it know if there were any event listeners on document.body or similar? – John Kurlak Commented Sep 25, 2012 at 4:41
• @JohnKurlak // I guessed that Javascript maintains an event list or something similar. – Moon Commented Sep 25, 2012 at 4:47
• 2 Read the W3Cs DOM Events for the specification of how events works. – some Commented Sep 25, 2012 at 5:23

5 Answers 5

From W3C Document Object Model Events

I know I'm nitpicking but it isn't javascript that handles the events you are describing, it is the DOM-engine (Document Object Model). In the browser there are bindings between the javascript and DOM engines so that events can be propagated to javascript, but it is not limited to javascript. For example MSIE has support for BASIC.

When an event is set to bubble, does Javascript checks up to "document" ?

1.2.3 "This upward propagation will continue up to and including the Document"

"Any event handler may choose to prevent further event propagation by calling the stopPropagation method of the Event interface. If any EventListener calls this method, all additional EventListeners on the current EventTarget will be triggered but bubbling will cease at that level"

When an event is set to capture, does Javascript always starts from "document"?

1.2.2 "Capture operates from the top of the tree, generally the Document,"

Event bubbling

JavaScript starts from document and goes all the way down to inner. If you add a listener on document and a listener on inner, both listeners fire.


My Findings

Turns out that the browser does some sort of smart processing so that it

a) doesn't have to loop through the entire parent hierachy

and

b) doesn't have to loop through all events.


Proof

a) It takes the browser no time to trigger both click events when the inner div is clicked:

Fiddle

b) It takes the browser no time to trigger both click events when the inner div is clicked when lots of other events exist that are attached to other DOM elements not in the parent hierachy:

Fiddle

Partial answer..

1 - When an event is set to bubble, does Javascript check up to "document" ?

Not if one of the elements in the hierarchy decides to stop the bubbling by calling stopPropagation()

I think this example in the MDN docs should be able to answer your question well.

When an event is sent to a node in the DOM, the event goes through 4 phases, but I will just focus on the two that are the most relevant to your question:

1. Capture phase
2. Bubbling phase

Capture phase

When an event is sent to a listener attached to a DOM node, the event goes through the capture phase in which it traverses from the top of the DOM tree (aka Window), down to the parent of the element/target, notifying any interested listeners along the way. I'll e back to this in a moment. After this point, the capture phase is finished, and the event is delivered to the target's listener.

Bubbling phase

The bubbling phase only begins if the event was set to bubble. It starts with the parent of the target, until it reaches the root of the DOM. You can think of it as doing the same thing done in the capture phase, but in reverse, and not to the same set of listeners.

The other two phases I didn't focus on are the EMPTY/NONE, and the AT_TARGET phase. You can read about those at the given links

Now ing back to the capture phase; The only listeners notified during this phase are the ones that have specified the capture flag as part of the subscription. During the capture phase, only these listeners are notified. These listeners could also prevent the event from reaching the target by calling event.stopPropagation.

The capture flag is specified as the third argument to EventTarget.addEventListener. Omission of this argument is the same as false, thus allowing the event to also be captured by a non-target listener in the bubbling phase.

Likewise, in the bubbling phase, only those listeners who were not notified during the capture phase are notified this time. At any point, these listeners could stop the event from bubbling further up the tree by calling event.stopPropagation

Back to the question...

When I set an event to #inner to bubble, does Javascript check up to document or does it stop at #outer

During the capture phase, every parent element registered to receive that event in capture mode will be called, and that includes the document node. If #outer is also registered to receive the event in capture mode, and calls event.stopPropagation, then the event will stop at #outer before it reaches #inner. Likewise, if the event bubbles, only those listeners interested in the bubbling phase will be called.

Bubbling example

The following is an example of an event that bubbles, notice the order in which the listeners are called:

#inner Foo handler called
#outer Foo handler called
Document Foo handler called

BTW, this has nothing to do with the order the events were subscribed to

document.addEventListener("DOMContentLoaded", () => {

  document.addEventListener("foo", (event) => {
    console.log("Document Foo handler called")
  }, false);

  document.getElementById("outer").addEventListener("foo", (event) => {
    console.log("#outer Foo handler called")
  }, false);

  const inner = document.getElementById('inner');
  inner.addEventListener("foo", () => {
    console.log("#inner Foo handler called")
  });

  setTimeout(() => {
    inner.dispatchEvent(new CustomEvent("foo", {
      bubbles: true
    }))
  }, Math.random() * 500);
});

<div id='outer'>
  <div id='inner'>Hello</div>
</div>

Capture example

Here is another example showing how we can prevent the event from reaching its target by calling stopPropagation from a parent element in capture mode. Notice the order:

Document Foo handler called
#outer Foo handler called

document.addEventListener("DOMContentLoaded", () => {

  document.addEventListener("foo", (event) => {
    console.log("Document Foo handler called")
  }, true);

  document.getElementById("outer").addEventListener("foo", (event) => {
    console.log("#outer Foo handler called");
    event.stopPropagation();
  }, true);

  const inner = document.getElementById('inner');
  inner.addEventListener("foo", () => {
    console.log("#inner Foo handler called")
  });

  setTimeout(() => {
    inner.dispatchEvent(new CustomEvent("foo", {
      bubbles: true
    }))
  }, Math.random() * 500);
});

<div id='outer'>
  <div id='inner'>Hello</div>
</div>

As you can see, although the event was sent to #inner, the event handler for #inner was never called because #outer called event.stopPropagation during the capture phase.

Finally, here is a slightly modified version of the MDN example, which shows how even custom events behave the same way.

All three phases (Capturing → Target → Bubbling) always happen, but only elements with listeners react.

lets assume below code -

grandParent.addEventListener("click", () => console.log("grandparent"))
parent.addEventListener("click", () => console.log("parent"), true)
child.addEventListener("click", () => console.log("child"))

Here when you click on child:

• First capturing phase happen so parent printed first
• Then bubbling happen means child and grandparent printed