Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Supporting Three Event Models at Once

by Danny Goodman and Apple Developer Connection

Events make the client-side JavaScript world go 'round. After a Web page loads, the only way a script can run is in response to a system or user action. While simple events have been part of the JavaScript vocabulary since the first scriptable browsers, more recent browsers implement robust event models that allow scripts to process events more intelligently. The problem, however, is that in order to support a wide range of browsers you must contend with multiple advanced event models. Three, to be exact.

The three event models align themselves with the Document Object Model (DOM) triumvirate: Netscape Navigator 4 (NN4), Internet Explorer 4 and later for Macintosh and Windows (IE4+), and the W3C DOM, as implemented in Netscape Navigator 6. Despite sometimes substantial differences among the models, they can all work side-by-side in the same document with the help of a few JavaScript shortcuts. This article focuses on two key aspects of the conflicting event models:

  • Methods for binding an event to an HTML element object.
  • Processing the event after it fires.

Approaches to Event Binding

Event binding is the process of instructing an HTML element to respond to a system or user action. There are no fewer than five binding techniques implemented in various browser versions. A quick overview of these techniques follows.

Event Binding I: Element Attributes

The simplest and most backward-compatible event binding avenue is an element tag's attribute. The attribute name consists of the event type, preceded by the preposition "on." Although HTML attributes are not case-sensitive, a convention has evolved to capitalize the first letters of each "word" of the event type, such as onClick and onMouseOver. These attributes are also known as event handlers, because they instruct an element how to "handle" a particular type of event.

Proper values for event handler attributes come in the form of JavaScript statements within quoted strings. Most commonly, a statement calls a script function that is defined inside a <SCRIPT> tag earlier in the document -- usually in the <HEAD> portion. For a function defined as:

function myFunc() {
    // script statements here

an event handler in, say, a button form control looks like the following:

<INPUT TYPE="button" NAME="myButton" VALUE="Click Here" onClick="myFunc()">

Event binding through element attributes has the advantage of allowing you to pass parameters to the event handler's function. A special parameter value -- the this keyword -- passes a reference to the element receiving the event. The following code demonstrates how one function can convert the content of any number of text boxes to uppercase characters with the help of the passed parameter:

function convertToUpper(textbox) {
    textbox.value = textbox.value.toUpperCase();
<FORM ....>
<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)">
<INPUT TYPE="text" NAME="last_name" onChange="convertToUpper(this)">

Event Binding II: Object Properties

For NN3+ and IE4+ browsers, scripters can bind events to objects by way of script statements instead of as tag attributes. Each element object that responds to events has properties for each event it recognizes. The property names are lowercase versions of the tag attributes, such as onmouseover. NN4 also accepts the interCap versions of the property names, but for cross-browser compatibility, the all-lowercase versions are trouble-free.

Comment on this articleWhat are your thoughts about scripting as you work in this cross-platform, cross-browser environment we know as the Web?
Post your comments

Previously in this series:

Scripting for IE 5 Macintosh Edition -- Windows-centric IE developers might assume that what they design works equally well on Mac and PC versions of the Microsoft browser. But that's not always true. Here's a look at how the Macintosh version of IE behaves with some popular Windows design techniques.

Binding occurs when you assign a function reference to the event property. A function reference is the name of the function, but without the parentheses of the definition. Therefore, to bind the click event of a button named myButton to invoke a function defined as myFunc(), the assignment statement is as follows:

document.forms[0].myButton.onclick = myFunc;

One point you should notice is that there is no way to pass a parameter to the function when the event fires. I'll come back to this point later in the discussion of event processing.

Pages: 1, 2, 3

Next Pagearrow