Summary

The basic event model of early browsers (and common to all modern browsers) enables portions of the page to respond dynamically to user actions. Version 4 browsers implemented different and incompatible event models to address flexibility and robustness issues in the early models. Netscape 4 sends events to their target from the top down, while Internet Explorer bubbles them from the bottom up. Both browsers make an Event object available to handlers, though the manner in which this is accomplished and the structure of the object itself vary from browser to browser.

Mozilla-based browsers were the first major browsers to implement the DOM2 standard event model. This model builds upon the DOM1 specification to provide the means for events to be bound to nodes in the document hierarchy. Events in this model first move down the hierarchy, allowing themselves to be captured by event listeners. Once they reach their target and its event handlers have executed, they bubble back up the hierarchy invoking the corresponding handler at each level. Event propagation can be turned off in DOM2 using the aptly named stopPropagation() method, and the default behavior of events can be canceled by returning false or with the preventDefault() method.

As more DOM2-supporting browsers have emerged on the scene, there are now three major event models (NS4, IE4+, and DOM2) beyond the traditional JavaScript model that programmers need to be aware of as they build their applications.