★ wanayoo — archive 1999 http://wdvl.internet.com/Authoring/JavaScript/Events/bubbling.html

Routing Events: Event Bubbling (Microsoft)

February 15,1999

Whereas events in Navigator were akin to an arrow soaring through the air in search of a target, an event launched in Microsoft Internet Explorer is more similar to an air bubble trapped inside a body of water -- it floats towards the top. Towards the top of what? The top of the object hierarchy, of course!

Consider the following snippet of HTML:

<div id="div1"> Greetings <div id="div2"> <p>I am strong.</p> <p>I am tall.</p> </div> </div>

As implied by the indentations used, these elements fall into a hierarchy, like the peel of an onion:

Outermost "div1"

Next Inner "Greetings"

Next Inner "div2"

Innermost "<p>I am strong.</p><p>I am tall.</p>"

The basis of event bubbling, then, is that an event will migrate "upwards" from its original target element to each element higher up the hierarchy which has an event handler for that event. We've only looked at a snippet of HTML in this example -- set in a page the div1 would not be the ultimate outermost target; the document object has that privilege on every page.

Let's take our HTML snippet and add a single event handler, for the onClick event, at the outermost level in our example -- div1.

<div id="div1" onClick="alert('Div1 clicked');"> Greetings <div id="div2"> <p>I am strong.</p> <p>I am tall.</p> </div> </div>

Now, if you were to click on any of the content produced by this snippet, the onClick event handler for div1 would trigger and the message "Div1 clicked" would pop up. Note that an inner element, such as the "I am strong" paragraph within div2, does not have an onClick handler attached. If you click on this element, though, the Click event bubbles up until it reaches an element which does have an onClick handler attached -- in this case, div1.

Let's add another onClick event handler to an inner element of this snippet.

<div id="div1" onClick="alert('Div1 clicked');"> Greetings <div id="div2" onClick="alert('Div2 clicked');"> <p>I am strong.</p> <p>I am tall.</p> </div> </div>

If you now click on "Greetings" then the "Div1 clicked" message appears. If you click on an element within div2, though, such as "I am strong" or "I am tall" you will see "Div2 clicked" followed by "Div1 clicked". Once again, event bubbling in action. Clicking a paragraph element within div2 triggers a Click event which, with no event handler at the paragraph itself, bubbles up to div2. The event handler at div2 executes and then the event bubbles up to div1, whose own event handler then executes.

The Click event will keep bubbling upwards through the entire document until it reaches the document object. On its way, every onClick event handler attached to every element will trigger.

As you can imagine, this bubbling is not always a good thing! We may have a perfectly legitimate reason for wanting only the onClick event handler for div2 to execute and no others This problem is solved courtesy of the cancelBubble property of the event object. If our event handler sets this property to true then the event stops in its tracks and does not bubble.

<div id="div1" onClick="alert('Div1 clicked');"> Greetings <div id="div2" onClick="alert('Div2 clicked');event.cancelBubble=true;"> <p>I am strong.</p> <p>I am tall.</p> </div> </div>

In this modified example, div2 pops up its message but then sets cancelBubble to true. The event does not bubble to div1. Note that this kills event bubbling only for this instance, it does not kill event bubbling in general.