Question

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?

Answer 1

Event bubbling

JavaScript checks all the way up to document. If you add a listener on document and a listener on inner, both listeners fire.

Event capturing

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