Inside Technique : DHTMLLib 2.0 : Event Models

Events are an essential element of any interactive web-page. Internet Explorer 4.0 extends the support of standard mouse and keyboard events to every element, while Netscape Navigator supports different events on each element. You should understand the overall model used by each browser.

Internet Explorer Event Bubbling

By extending events to every element, Internet Explorer could have made event handling very confusing. For example, imagine you click on an link in a paragraph. Since all elements have events, both the link and the paragraph (as well as the body), were clicked on. To manage this event sequence, Internet Explorer did just that, created an automatic sequence for all events. Whenever you click on an element, the event first goes to the element immediately influencing the click, and then the container of the element receives the event and so on. So clicking on the link in our original example causes the event to occur on the link (A element), then the paragraph, then the body element, and then finally on the document itself. This chain of events is called event bubbling.

To control event bubbling, Internet Explorer exposes an event object. This event object contains information about the event such as where the event started (eg., the link element), the type of event (eg., click), mouse position and key information, plus a few status properties. These status properties let you cancel the default action (stop the link from navigating you) as well as cancel the bubbling. This allows you to write a generic onclick handler for all elements except for one. The one you do not want handled you just stop the event bubbling on the element.

Netscape Navigator Event Capturing

Netscape Navigator on the otherhand, exposes a fragmented set of events on different elements. For example, the input element exposes different events depending upon the type of input. If the input element is a button you can get an onclick event, but if it is a textbox, there is no onclick event.

In addition, Netscape exposes a new concept called Event Capturing. Event Capturing is similar to a manual version of event bubbling. However, when you manually choose to capture event using the captureEvent() function, the event first goes to the more general object catching the event (eg., the document), and then with the routeEvent() function to the specific element. This is kind of like event bubbling in reverse except it only works with INPUT, SELECT, TEXTAREA, FORM, IMG, LINK, and positioned elements.

To simplify matters, DHTMLLib automatically extends Netscape using their event capturing functions to support limited event bubbling over elements that support events.

Making Sense of this Madness

Before you throw in the towel on cross-browser development enter DHTMLLib. DHTMLLib allows you to use a subset of the Internet Explorer object model in Netscape. Next we introduce you to DHTMLLib and explain why we chose to emulate Internet Explorer rather than an alternative solution.

[Enter DHTMLLib]

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.