The Internet Explorer Event Model: Event Bubbling - Doc JavaScript

Event Bubbling

Internet Explorer 4.0x introduces a new way to handle events -- event bubbling. Event bubbling is new to HTML and JavaScript, but it is used by many other environments, including Windows, OS/2, OSF Motif, HyperCard, ToolBook, and Marimba.

Internet Explorer 4.0x initially directs an event to its intended target. For example, if a button is clicked, the click event is directed to the button. The event invokes an event handler if one is defined for that object. If no event handler is defined to take care of the event, or if the event handler does not return false (to cancel the event), the event proceeds to the parent object for handling. The event bubbles up the object hierarchy until it is handled, or until it reaches the topmost level, the document object.

In order to understand this mechanism you must first have a basic understanding of the DOM (Document Object Model) in Internet Explorer 4.0x. All document content, including elements and attributes, is programmatically accessible and manipulable. In other words, with Internet Explorer 4.0x, every element is reflected as an object in the hierarchy. Thus, any element on the page can be the source for a full set of mouse and keyboard events. Internet Explorer 4.0x is currently the only browser to fully comply with the DOM requirements, as specified in a W3C working draft:

1. All elements will be capable of generating events.
2. There will be interaction events, update events, and change events.
3. The event model will allow responses to user interactions.
4. The event delivery mechanism will allow for overriding of default behavior.
5. Events will bubble through the structural hierarchy of the document.
6. Events are synchronous.
7. Events will be defined in a platform independent and language neutral way.
8. There will be an interface for binding to events.

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).

An event has a very clear life cycle. It starts when the action that initiates the event occurs. It ends with the final response of the event handler script, the event processing function, or the browser itself (for example, if the user submits a form by clicking a button, the browser would normally submit the form). Here are the steps of a typical event's life cycle:

1. The action or condition that initiates the event occurs. A built-in JavaScript function can simulate various actions that trigger events.
2. The event object is updated to reflect the characteristics of the event.
3. The event is directed to to its intended taget (the source element). If the element features an event handler, the event handler (a script or an event processing function) carries out its actions.
4. The event bubbles up to the next event in the hierarchy, and the event handler for that element is called. This step repeats until the event reaches the top of the hierarchy or is cancelled by an event handler on its way up.
5. The event's default action takes place (provided that the event wasn't canceled during its journey). A defaut action is carried out by the browser. For example, the browser might submit a form, follow a link, resize a window, etc.

Created: December 30, 1997
Revised: December 30, 1997

URL: https://www.webreference.com/js/column10/eventbubbling.html