Home/ Questions/Q 8341579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T05:31:32+00:00

I’m trying to understand what determines the order in which event handlers are triggered

  • 0

I’m trying to understand what determines the order in which event handlers are triggered when clicking a nested <div> – what I am seeing seems to be at odds with documented behaviour so I’m looking for a little help to understand it.

I have 2 nested divs, and I have 2 event handlers attached to each, one for the capturing phase, and one for the bubbling phase:

<html>
    <head>
        <script>
            function setup(){
                var outer = document.getElementById('outer');
                outer.addEventListener('click', function(){console.log('outer false');}, false);
                outer.addEventListener('click', function(){console.log('outer true');}, true);

                var inner = document.getElementById('inner');
                inner.addEventListener('click', function(){console.log('inner false');}, false);
                inner.addEventListener('click', function(){console.log('inner true');}, true);
            }           
        </script>
        <style>
            div {
                border: 1px solid;
                padding: 1em;
            }
        </style>
    </head>
    <body onload="setup()">
        <div id="outer">
            <div id="inner">
                CLICK
            </div>
        </div>
    </body>
</html>

According to what I have read the output should be:

outer true
inner true
inner false
outer false

but what I actually see (on Chrome and Firefox) is:

outer true
inner false
inner true
outer false

Can anyone explain the discrepancy?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    W3C event flow spec (i.e., what Chrome and Firefox implement) is that all events are first captured until they reach the target element, at which point they bubble up again. However, when the event flow reaches the event target itself, the event is no longer capturing or bubbling–it’s on the target itself. Because bubbling/capturing is not applicable, the event handlers fire in the order in which they are registered. Try swapping the order of your inner element event handlers, you’ll find that it also changes the order of the console output.

    jsFiddle example: http://jsfiddle.net/RTfwd/1/

    More recent revisions of the DOM Event spec make this point more clear (http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html):

    bubbling phase
    The process by which an event can be handled by one of the target’s ancestors after being handled by the event target. See the description of the bubble phase in the context of event flow for more details.

    capture phase The process by which an event can be handled by one of
    the target’s ancestors before being handled by the event target. See
    the description of the capture phase in the context of event flow for
    more details.

    • 0