Chapter 17. Events and Event Handling

As explained in Chapter 13, 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 a button in a form. If a JavaScript application cares about a particular type of event for a particular document element, it can register an event handlera JavaScript function or snippet of codefor 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 14) 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 Sections 14.1 and 14.7 in the context of this chapter.

Most nontrivial JavaScript programs rely heavily on event handlers. Past chapters have included 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 three distinct and incompatible event-handling models are in use.^[*] These models are:

^[*] Netscape 4 also had its own distinct and incompatible event model. That browser is no longer widely deployed, however, and documentation of its event model has been removed from this book.

The original event model

This is the simple event-handling scheme that's been 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 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 DOM Level 2. It is supported by all modern browsers except Internet Explorer.

The Internet Explorer event model

This event model originated in IE 4 and was extended in IE 5. It 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, it has stuck with its proprietary event model instead.^[*] This means that JavaScript programmers who want to use advanced event-handling features must write special code for IE browsers.

^[*] At the time of this writing, IE 7 is under development, but there are no indications that it will support the standard event model, either.

This chapter documents each of these event models in turn. Coverage of the three event models is followed by three sections that include extended examples of handling mouse, keyboard, and onload events. The chapter concludes with a brief discussion of creating and dispatching synthetic events.