Visual Basic Concepts

Event Bubbling in DHTML Applications

Unlike standard Visual Basic programming, where each object must have its own unique event handler, objects in Dynamic HTML can share event handlers. When an event occurs on a child object, the event can travel up the chain of hierarchy within the page until it encounters an event handler to process the event. This process is called event bubbling.

The following figure shows the process of event bubbling.

Event Bubbling Process

In this picture, the diagram displays a portion of the structure of an HTML page within a DHTML application. The top level is the Document object, which contains the HTML page. The Body element is the top-level tag in the HTML page. Within the body is a table, and within the table is a hyperlink. In a sense, the hyperlink can be said to be the child of the table, which is in turn a child of the body tag, and so forth.

When the hyperlink event fires, Visual Basic can bubble that event up the hierarchy until it finds an event handler. If it does not find an event handler in the hyperlink, it looks in the table, then the body, then the DHTMLPage object, and finally in the document. The event stops bubbling the first time it finds an event handler.

Note   The hierarchy through which events bubble up is determined by the position of elements in the HTML stream. This order does not necessarily correspond to the order of items you view on the screen. For example, in the picture above, the Hyperlink element appears beneath the table in the HTML stream. If you use position attributes on the Hyperlink to move it so that it appears elsewhere when it is displayed in the browser, its events will still bubble up to the table because its position in the HTML stream is unchanged.

Event bubbling can reduce the amount of code you need to write. For example, suppose you want a second set of options to become available when a check box is selected. Rather than writing a click event procedure for each check box on your form, you can write the procedure on the form itself. When one of the check boxes is selected, the event will automatically bubble up to the parent form and be processed there.

You can cancel event bubbling on an element if you do not want the element’s events to bubble up the hierarchy. You stop bubbling by setting the cancelBubble**property of the event object to true in any event handler. After the handler returns, the event stops bubbling and comes to an immediate end.

For More Information   For more detailed information on how to bubble events or cancel bubbling, see "Understanding the Event Model" in the "Dynamic HTML" section of the Internet/Intranet/Extranet Services SDK.