January 31, 2000 - IE Event Bubbling | WebReference

January 31, 2000 - IE Event Bubbling

Yehuda Shiran January 31, 2000
IE Event Bubbling
Tips: January 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Event bubbling is very useful because it allows multiple actions to be processed centrally. Remember that this is also possible with Navigator 4.0x's event model, which lets you capture events at various levels of the object hierarchy. The event model in both fourth-generation browsers reduces the amount of overall code required to handle various events. Now that you know the theory, take a look at the following example:

<P onClick="functionName()">
This is a paragraph, and <B>these are bold words in the paragraph</B>.
</P>

Since every single element on the page is represented as an object, you can provide an onClick event handler for the paragraph tag (<P></P>). When you click the word "is," for instance, the click event is directed to the P element for processing. Since the P element features an appropriate event handler, it handles the event, and the event does not continue its journey. However, when you click the word "these," the event is first sent to the B element (<B></B>), because it is also reflected as an object. However, the B element doesn't feature an onClick event handler, so the click event bubbles up to its parent object, which happens to be the P element. The paragraph then handles the event. If Internet Explorer 4.0x didn't support event bubbling, this would not be possible. Clicking "these" would cause no action because there is no event handler attached to the B element. Here's the preceding example in action:

This is a paragraph, and these are bold words in the paragraph.

Just click anywhere in the pargraph to trigger the P element's event handler. Take a look at the following example:

<P onClick="functionName2()">
This is a paragraph, and <B onClick="functionName1()">these are bold words in the paragraph</B>.
</P>

If you click the bold part of the paragraph, the B element's event handler is called, and functionName1() is executed. Since the event handler does not return false, the event bubbles up to the next element in the hierarchy, P. P element's event handler is called and functionName2() is executed. The event then continues its jourey through the object hierarchy, until it reaches the next defined element on the page. For your reference, here's the preceding example in action:

This is a paragraph, and these are bold words in the paragraph.

Now consider the following statement:

document.onclick = functionName;

Even though this seems to be a very simple statement, it actually requires event bubbling in order to work properly. For example, if you click an image on the page, the click event bubbles up from the image's object to the document object (provided that none of the objects in the event's path handle it and return false).

Learn more about events and event bubbling in Column 10, The Internet Explorer Event Model.