|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Event Binding III: IE4+ <SCRIPT FOR> Tags
In IE4+, Microsoft implements its own extensions to the
The value of the
Script statements are not in a function, but within the
Naturally, statements inside the tag can call any other functions defined elsewhere on the page (or imported from a .js file). But this binding style means that you must create a
You must also be careful to deploy this binding approach only on pages that will be viewed by IE4+ browsers. Any other scriptable browser (including IE3) that doesn't implement this special kind of
Event Binding IV: The IE5/Windows attachEvent() Method
Implemented before the W3C DOM working group honed the standard event model, the
The syntax for the
Values for the eventName parameter are strings representing the event name, such as
One caveat about this approach: You cannot permit the statement to execute before the element's tag loads in the browser. The reference to the button object is not valid until the HTML creates the element in the browser. Therefore, such binding statements need to run either at the bottom of the page or in a function invoked by the
Event Binding V: The W3C DOM addEventListener() Method
Netscape 6 adopts the W3C DOM Level 2 event binding mechanism, which, while similar to the IE5/Windows
The syntax for the
In the jargon of the W3C DOM specification, the
Which Binding is Best?
If you're lucky enough to be creating applications for a single browser version and operating system, you can opt for the most modern binding for the chosen browser. Cross-browser authors, however, have a substantial challenge.
If you plan to support IE5/Mac, you can dismiss the
On the one hand, the tag attribute approach is acknowledged by the W3C DOM Level 2 recommendation as an acceptable substitute for the
On the other hand, embedding script-oriented information within an element's tag flies in the face of the compelling trend toward separating content from style and behavior. Binding events as object properties heads in the right direction, but there is no "official" support for event properties in W3C standards related to HTML, XHTML, or DOM. The approach is, however, supported in real life by all but the first-generation scriptable browsers.
A standards purist will find fault with either approach; but a practical developer should feel "safe" with either approach, even when considering compatibility with future mainstream browsers.
The Event Mother Lode: The Event Object
At the core of all three event models is an event object -- an abstract entity whose properties contain a ton of information that is potentially valuable to functions that process events. From the discussion of event binding techniques earlier in this article, you might deduce one reason why the event object is so vital to scripts: with the exception of tag attribute binding, no binding approach permits parameter passing to the event handler function.
The event object fills the gap by providing enough "hooks" to let a function read event characteristics. Thus, a function can retrieve a reference to the element that received the event and other tidbits, such as coordinates of mouse actions, mouse button(s) used, keyboard keys pressed, and whether any modifier keys were held down during the event (for example, to detect a Shift-click).
Accessing the Event Object
Although the precise composition of the event object varies according to the three DOMs discussed throughout this article (NN4, IE4+, and W3C/NN6), an event handler function can access an event object in only one of two ways: the NN way and the IE way. The W3C/NN6 DOM event object exposes itself to scripts the same way the NN4 event object does; IE4+, on the other hand, has a different approach.
The IE4+ event object is easier to describe, so we'll cover that first. Simply said, the event object is a property of the
On the NN4 and W3C DOM sides, the event object seems even more abstract. For all event binding techniques except the tag attribute style, the event object gets passed automatically to the function bound to the event. A single parameter is sent to the function. It is your job to provide a parameter variable in the function definition to "receive" that parameter value. To avoid conflict with the IE
If you use the tag attribute event binding technique, however, you must explicitly pass the event as one of the parameters of your function call. To do this, use the
The incoming parameter variable is your function's only connection to the NN event object. If the object or its values are needed in another function that is invoked from within the main event handler function, you must relay the object or its property value(s) as a parameter(s) to the other functions.
If you're wondering whether IE would plug the
Accommodating Both Event Object References
Assuming that a function needs to inspect one or more properties of an event object to process the event, a simple technique lets your function work with the event object passed as a parameter or read from the
To begin, always define your event handler functions with a parameter variable to prepare for the possibility of an incoming event object. Then use a simple conditional expression to assign the event object of the browser to that parameter variable:
If the event object arrives as a parameter, it remains assigned to the
To complete the job, however, you should also include one more conditional layer that gracefully handles earlier browsers lacking an event object in their object models:
By building all event handler functions this way, you define a function that accommodates event objects passed explicitly from tag attribute binding or implicitly from event property binding. Even if you change the binding style during development, the function doesn't have to change.
Event Object Smorgasbord
Establishing a reference to the event object is only part of the battle, however. Each event object from each event model has its own set of properties containing event details. The table below lists the most commonly accessed properties and the names of those properties in the three primary event object types.
*Values can be calculated by evaluating
IE5 for the Macintosh generally follows the IE4+ event object. The one exception is that the IE5/Mac event object features both a
Perhaps the most important event object property to extract is a reference to the HTML element that receives the event. The NN4 and W3C event objects share the same property name (
From here, your script can read and/or write whatever element object properties that the browsers object model exposes.