Overview of Modern Event Models

The basic event model works well for simple tasks like form validation, but leaves a lot to be desired if you wish your Web page to act more like an application. First off, in the basic model, no extra information about the event is passed to the handler save that the event occurred. Second, in the traditional model, there is no easy way for event handlers in different parts of the object hierarchy to interact. Finally, you are limited to firing events manually on those elements that provide event methods (like click()). Modern event models—those supported in the 4.x generation and later browsers—address these shortcomings, albeit in different and incompatible ways. The Level 2 DOM goes even further by merging the proprietary models into one standard and extending its capabilities considerably.

One major difference between version 4+ models and the basic model is the addition of the Event object. This object gives event handlers a snapshot of the context in which the event occurred. For example, it includes the screen coordinates of the event, the mouse button that was used (if any), and any modifying keys, such as ALT or CTRL, that were depressed when it occurred.

Another major difference is that events in newer models propagate through the document hierarchy. In Netscape 4, events begin at the top of the hierarchy and “trickle” down to the object at which they occurred, affording enclosing objects the opportunity to modify, cancel, or handle the event. Under Internet Explorer, events begin at the object where they occur and “bubble” up the hierarchy. Under DOM2, events can trickle down and bubble up, as shown here: