Mikel
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 Safari. 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
…
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.
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.
Event Binding III: IE4+
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
