Event bubbling ensures that the event handlers for all elements in which an event occurs have an opportunity to respond to the event. Consider the following example:

<p onclick="doIt ( )"> Go to <b>sample</b> document.</p>

The user might reasonably expect that clicking the word "sample" will cause the same action, a call to the event handler named doIt, as clicking any other word in the P element. But if events did not bubble up from the source element, clicking "sample" would cause no action because there is no event handler bound to the B element. Because events do bubble up through the element hierarchy, every event handler on the element's parent hierarchy has a chance to respond, and in this case doIt is called when the user clicks "sample."

Unless you keep event bubbling in mind, you might initially be baffled by some results. For example, consider a document that uses onmouseover and onmouseout events to show and hide a collection of paragraphs, but also uses the events inside the list to highlight paragraphs in the collection.

<div onmouseover="showPara ( )"
   onmouseout="hidePara ( )">My Menu
<p style="display:none"
   onmouseover="highlight ( )"
   onmouseout="unhighlight ( )">Item 1
<p style="display:none"
   onmouseover="highlight ( )"
   onmouseout="unhighlight ( )">Item 2</div>

In the example above, suppose the user moves the mouse over the words "My Menu," then over the words "Item 1," and finally over the words "Item 2." Here's what happens:

The mouse cursor moves over "My Menu."

The onmouseover event fires for the DIV element, and showPara is called.

The mouse cursor moves from "My Menu."

The onmouseout event fires for the DIV element, and hidePara is called.

The mouse cursor moves over "Item 1."

The onmouseover event fires for the P element, and "highlight" is called.

The onmouseover event bubbles up to the DIV element, and showPara is called with P as the source element.

The mouse cursor moves from "Item 1."

The onmouseout event fires for the P element, and "unhighlight" is called.

The onmouseout event bubbles up to the DIV element, and hidePara is called with P as the source element.

The mouse cursor moves over "Item 2."

The onmouseover event fires for the P element, and "unhighlight" is called.

The onmouseover event bubbles up to the DIV element, and showPara is called with the second P as the source element.

As you can see, whenever the user moves the mouse over and away from a paragraph in the collection, the event handlers for DIV are called. If the handlers were written without taking this into account, the paragraphs might be hidden when they should not be.

In general, whenever you use nested event handlers in this way, you need to carefully consider whether the event handler should carry out an action each time it is called. One way to control the action is to use the cancelBubble property. In the previous example, the "highlight" and "unhighlight" event handlers could set cancelBubble to true to prevent the event from bubbling up to the DIV element. Another way is to check the source element for the event, the srcElement property of the event object, and pick an action that is appropriate to that element.

It is possible to trap events on an element even though the element does not natively support the event. For example the onchange event is only supported by elements that are editable, such as the input type=text object. This event will not fire on a noneditable object such as a DIV. However, because of event bubbling you can define an event handler for the onchange event on a DIV. Any onchange events fired by elements contained in the DIV will bubble up to the DIV and be handled by its event handler.

<div onChange="OnChangeHandler ( )">
<input type=text>
<input type=text>
</div>

In this example, when the user enters something in the first text box and then tabs to the next box, the onchange event for the text box will fire. The event bubbles up through the element hierarchy until it is trapped by the DIV's event handler.