The earliest form of event handling is still one of the most common:
the use of an event handler. An event handler is an element property that
you can assign a function, such as the following, which assigns a function
You can also assign an event handler directly in an element, such as
in the opening
though not all are available to all web page elements. The
unload events are typically used with the
window object to signal when the page is finished loading, and just
before the page is unloaded because the web page reader is navigating
away from the page. The
reset events are
used with forms to signal when the form is submitted, or has been reset
by the reader.
focus events are
frequently used with form elements, to determine when an element gets
focus, and loses it. Changing a form value can trigger the
change event. The
change events are especially handy if you need
to validate the form values.
Most web page elements can receive the
dblclick event. Other
mouse events include
mouseup, which can be used to track the cursor
and mouse activity.
You can assign the event handler in the element directly:
In the last several years, a newer DOM Level 2 event handling system has emerged and achieved widespread use. With DOM Level 2 event handling, you don’t assign a function to an event handler directly; instead, you add the function as an event listener:
The general syntax is:
The last parameter in the function call has to do with how events
are handled in a stack of nested elements. For example, if you’re
capturing an event for a link within a
div element, and you want both elements to do
some processing based on the event, when you assign the event listener
to the link, set the last parameter to
false, so the event bubbles up to the
You can also remove event listeners, as well as cancel the events themselves. You can also prevent the event from propagating if the element receiving the event is nested in another element. Canceling an event is helpful when dealing with form validation, and preventing event propagation is helpful when processing click events.
It’s up to you to decide which level of event handling meets your
needs. If you’re doing simple event handling—not using any external
events bubble up in a stack of elements—you can use DOM Level 0 events.
Most of the examples in this book use
window.onload to trigger the demonstration
There are newer events to go with the newer models, and to go with
a nonbrowser-specific DOM. As examples of DOM events, the
DOMNodeRemoved events are triggered
when a node is added or removed from the page’s document tree. However,
I don’t recommend using the W3C event for general web pages, as these
events are not supported in the current versions of IE, and only
partially supported in most other browsers. Most web application authors
wouldn’t need these events, anyway.
There are also events associated with the increasingly popular mobile and other hand-held computing environments. For instance, Firefox has a nonstandard set of events having to do with touch swiping, which Mozilla calls the mouse gesture events. It’s interesting, but use with caution until there’s wider acceptance of the newer events. We’ll take a look at one type of mobile device event handling towards the end of the chapter.
See Recipe 7.3 for a demonstration of handling cross-browser event handling.