2.8 Events and Event Handling

2.8 Events and Event Handling

We saw at the beginning of this section that one way to embed client-side JavaScript into HTML documents is to use event handler attributes of HTML tags. The following table lists the standard event handler attributes and the HTML tags to which they may be applied. The first column of the table gives the event handler attribute name: these names always begin with "on". The second column of the table lists the HTML tags to which these attributes can be applied, and explains, when necessary, what events trigger the handler code to be executed.

Handler

Supported by/Triggered when

onabort

<img>; image load aborted

onblur

<body> and form elements; window or element loses keyboard focus

onchange

Form elements; displayed value changes

onclick

All elements; mouse press and release; return false to cancel

ondblclick

All elements; mouse double-click

onerror

<img>; image loading fails

onfocus

<body> and form elements; window or element gets keyboard focus

onkeydown

<body> and form elements; key pressed; return false to cancel

onkeypress

<body> and form elements; key pressed and released; return false to cancel

onkeyup

<body> and form elements; key released

onload

<body>, <frameset>, <img>, <iframe>, <object>; document, image, or object completely loaded

onmousedown

All elements; mouse button pressed

onmousemove

All elements; mouse pointer moved

onmouseout

All elements; mouse moves off element

onmouseover

All elements; mouse moves over element; return true to prevent link URL display in status bar

onmouseup

All elements; mouse button released

onreset

<form>; form reset requested; return false to prevent reset

onresize

<body>, <frameset>; window size changes

onsubmit

<form>; form submission requested; return false to prevent submission

onunload

<body>, <frameset>; document unloaded

Note that when the browser triggers certain event handlers, such as onclick, onmouseover and onsubmit, it examines the return value of the handler (if there is one) to determine whether it should perform the default action associated with the event or not. Typically, if an event handler returns false, the default action (such as following a hyperlink or submitting a form) is not performed. The one exception is for the onmouseover handler: when the mouse moves over a hyperlink, the browser displays the link's URL in the status line unless the event handler returns true.

2.8.1 Event handlers as JavaScript functions

We've seen that the various document object models represent HTML tags as JavaScript objects, with the attributes of those tags as properties of the objects. The same is true of event handlers. If your HTML document includes a single <form> tag with an onsubmit event handler attribute, that event handler is available as:

document.forms[0].onsubmit

Although HTML event handler attributes are written as strings of JavaScript code, the value of the corresponding JavaScript properties are not strings of code, but actual JavaScript functions. You can create a new event handler simply by assigning a function to the appropriate property:

function validate() { // Form validation function
  // check validity here
  return valid;       // return true or false
}
// Now check user input before submitting it
document.forms[0].onsubmit = validate;

2.8.2 Advanced event handling

The previous sections describe the basic event-handling model for client-side JavaScript. Advanced event-handling features are also available, but unfortunately, there are three incompatible event models: the standard W3C DOM model, the Internet Explorer model (Microsoft has not adopted the W3C standard), and the Netscape 4 model. These event models are complex, so the following list simply summarizes the advanced features supported by these models. For details consult JavaScript: The Definitive Guide.

Event details: In the advanced event handling models, event details such as event type, mouse buttons and coordinates, modifier key state, and so on, are provided through the properties of an Event object. In the W3C and Netscape event models, this Event object is passed as an argument to the event handler. In the IE model, the Event object is not an argument but is instead stored in the event property of the Window on which the event occurs. Unfortunately, each of the three advanced event models use different property names to store event details, so cross-browser compatibility is difficult. See Event in the reference section for documentation of each of the three types of Event objects.
Event propagation: In the basic event model, event handlers are triggered only for the document element on which the event occurred. In the advanced models, events can propagate up and/or down the element hierarchy and be handled by one or more event handlers. In the Netscape and W3C models, events start at the document object and propagate down through the document tree to the element on which they occurred. If any of the containing elements have special capturing event handlers registered, these event handlers capture the event and get first crack at handling it. In the IE and W3C models, certain types of events (such as mouse clicks) bubble up the document tree after being handled at their source. Thus, you might register an onclick event handler on a <div> object in order to handle all mouse clicks that occur on elements within that <div>. Capturing, bubbling, and normal event handlers have the option of preventing the event from propagating any further, although the way this is done is different in each model.
Event handler registration: In the W3C event model, event handlers are not simply assigned to properties of document objects. Instead, each document object has an addEventListener( ) method that you call to register an event handler function for a named type of event. This allows advanced applications to register more than one handler for the same event type.