Chapter 19. Events and Event Handling

As we saw in Chapter 12, interactive JavaScript programs use an event-driven programming model. In this style of programming, the web browser generates an event whenever something interesting happens to the document or to some element of it. For example, the web browser generates an event when it finishes loading a document, when the user moves the mouse over a hyperlink, or when the user clicks on the Submit button of a form. If a JavaScript application cares about a particular type of event for a particular document element, it can register an event handler -- a JavaScript function or snippet of code -- for that type of event on the element of interest. Then, when that particular event occurs, the browser invokes the handler code. All applications with graphical user interfaces are designed this way: they sit around waiting for the user to do something interesting (i.e., they wait for events to occur) and then they respond.

As an aside, it is worth noting that timers and error handlers (both of which are described in Chapter 13) are related to the event-driven programming model. Like the event handlers described in this chapter, timers and error handlers work by registering a function with the browser and allowing the browser to call that function when the appropriate event occurs. In these cases, however, the event of interest is the passage of a specified amount of time or the occurrence of a JavaScript error. Although timers and error handlers are not discussed in this chapter, it is useful to think of them as related to event handling, and I encourage you to reread Section 13.4, and Section 13.5, in the context of this chapter.

Most nontrivial JavaScript programs rely heavily on event handlers. We've already seen a number of JavaScript examples that use simple event handlers. This chapter fills in all the missing details about events and event handling. Unfortunately, these details are more complex than they ought to be, because there are four distinct and incompatible event-handling models in use. These models are:

The original event model. This is the simple event-handling scheme that we've used (but not thoroughly documented) so far in this book. It was codified, to a limited extent, by the HTML 4 standard, and is informally considered to be part of the DOM Level 0 API. Although its features are limited, it is supported by all JavaScript-enabled web browsers and is therefore portable.

The standard event model. This powerful and full-featured event model was standardized by the DOM Level 2 standard. It is supported by the Netscape 6 and Mozilla browsers.

The Internet Explorer event model. This event model is implemented by IE 4 and later and has some, but not all, of the advanced features of the standard event model. Although Microsoft participated in the creation of the DOM Level 2 event model and had plenty of time to implement this standard event model in IE 5.5 and IE 6, they have stuck with their proprietary event model instead. This means that JavaScript programmers who want to used advanced event-handling features must write special code for IE browsers.

The Netscape 4 event model. This event model was implemented in Netscape 4 and continues to be (mostly, but not fully) supported in Netscape 6, although it has been superseded by the standard event model. It has some, but not all, of the advanced features of the standard event model. JavaScript programmers who want to use advanced event-handling features and retain compatibility with Netscape 4 need to understand this model.

The rest of this chapter documents each of these event models in turn.