What does “event bubbling” mean?

“Delegation” and “bubbling” are terms that gets thrown round a lot in JavaScript; but what exactly do these terms mean?

This is the first in a series of posts on bubbling, delegation and how to delegate events with jQuery; What does event bubbling mean, Event Delegation in JavaScript and Event Delegation with jQuery

Event Bubbling

In JavaScript, events bubble. This means that an event propagates through the ancestors of the element the event fired on. Lets show what this means using the HTML markup below;

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

Lets assume we click the span, which causes a click event to be fired on the span; nothing revolutionary so far. However, the event then propagates (or bubbles) to the parent of the span (the <a>), and a click event is fired on that. This process repeats for the next parent (or ancestor) up to the document element.

You can see this in action here. Click “Hello” and see the events as they get fired. The code used is shown below;

window.addEventListener("load", function () {
    var els = document.querySelectorAll("*");

    for (var i = 0; i < els.length; i++) {
        els[i].addEventListener("click", function () {
            alert('Click event fired on the ' + this.nodeName + ' element');
        });
    }
});

Note that I’m not interested in adding support to older versions of IE (<9). You’ll have to add the normal fallback to attachEvent instead of addEventListener if you want to support them, and find an alternative for querySelectorquerySelectorAll.

That’s all event bubbling is; an event fired on an element bubbles through its ancestor chain (i.e. the event is also fired on those elements). It’s important to note that this isn’t a jQuery feature, nor is it something that a developer must turn on; it’s a fundamental part of JavaScript that has always existed.

Ok, that’s a little bit of a lie… sort of.

By default, not all events bubble. For instance submit does not normally bubble, nor does change. However, jQuery masks this in the event handling code using all sorts of voodoo, so it will seem that they do bubble when using jQuery.

Now move onto the next article; Event Delegation in JavaScript

14 thoughts on “What does “event bubbling” mean?

  1. I have struggled to understand this concept for months. Now i understood clearly.

  2. Pingback: Bubble Mouse Move events from child controls up the hierarchy in Windows Forms | Magerquark.de

  3. Great article Matt. I am wondering about the history of event bubbling. It seems to have been formalized by the W3C in DOM Level 2. I am trying to find a timeline for this just so I can understand the history. Do you know when that was?

    Thx & rgds

    mjg

  4. Not sure your jsfiddle example is of any use, or relates to your post – you are expliciting adding a listener to every object on the page. A demonstration of bubbling would only have an event listener assigned to one object (?)

  5. Hi Peter. Thanks for your comment. The jsfiddle was trying to signify that one click will bubble up through all it’s ancestors. By attaching a listener to every DOM element, the jsfiddle showed the single “click” event firing on each ancestor. I’ve tried to make that bit clearer in my post!

  6. Pingback: Javascript Interview Questions | KRIYANCE

  7. Sorry, what confounds us perenial noobs is why. Why does an event bubble up through all the ancestors. What good does that do?

Leave a Reply

Your email address will not be published. Required fields are marked *