Javascript [Electronic resources] : The Definitive Guide (4th Edition) نسخه متنی

Chapter 19. Events and Event Handling

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.