Search code examples
javascriptdom-eventsevent-bubbling

Event bubbling/capturing - where does it start/end?

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?

Solution

  • 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