WebReference.com - Part 1 of Chapter 6 from Dynamic HTML: The Definitive Reference, 2nd Edition. From O'Reilly (5/5).

[previous]

Dynamic HTML: The Definitive Reference, 2E. Chapter 6: Scripting Events

Event Handlers as <script> Tags (IE 4 and Later)

The third technique for binding event handlers to objects currently works only in Internet Explorer 4 and later (for all operating system platforms). The technique uses two proprietary attributes (for and event) in the <script> tag to specify that the script is to be run in response to an event for a particular object. The for attribute points to an id attribute value that is assigned to the element that generates the event handler; the event attribute names the event handler. Internet Explorer does not attempt to resolve the for attribute reference while the document loads, so it is safe to put the tag before the element in the source code.¹

The following fragment shows what the entire <script> tag looks like for the function defined earlier that converts all of a form's element content to uppercase in response to a button's onclick event handler:

<script for="upperAll" event="onclick" language="JavaScript" 
type="text/javascript">
var form = document.forms[0];
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == "text") {
            form.elements[i].value = form.elements[i].value.toUpperCase();
        }
    }
</script>

The HTML for the button does not include an event handler, but does require an id (or name) attribute.

<input type="button" id="upperAll" value="Convert All">

Do not use this technique in pages that might be viewed by non-IE browsers. The extra attributes tell IE to defer script execution until invoked by the event type on a certain element. A non-IE browser treats the script statements as if they existed in plain <script> tags, and will execute while the page loads. Script errors are sure to arise in non-IE browsers.

Note that you might see a variation of this technique for defining scripts directly as event handlers when the scripting language is specified as VBScript. Instead of specifying the object name and event as tag attributes, VBScript lets you combine the two in a function name, separated by an underscore character, as in:

<script language="VBScript" type="text/vbscript">
Function upperAll_onclick
    script statements
End Function
</script>

The tag for the element requires only the id attribute to make the association.

Attaching Events (IE 5 and Later for Windows)

Microsoft devised the attachEvent() and detachEvent() methods of element objects primarily to support a feature it calls behaviors (external XML documents that contain generic script definitions, not unlike the concept of style sheets). But in browsers that support these methods, you can use them to bind events to element objects.

The attachEvent() method requires two parameters:

elementReference.attachEvent("event", functionReference);

The event parameter is the "on" version of the event name, while the function reference is just like the kind you assign to an object event handler property. The combination of attachEvent() and detachEvent() allows scripts to enable and disable scripted functionality as desired.

Although Microsoft has submitted HTML behaviors as a proposed W3C standard, any future standardized implementation details are difficult to predict. Within the confines of supported IE versions, this syntax is perfectly acceptable.

W3C Event Listeners (Netscape 6 and Later)

The W3C DOM's Events module introduces fresh terminology to event binding, but the concepts behind the new words are not new. In line with the object-oriented nature of the W3C DOM, two node object methods, addEventListener() and removeEventListener(), which add and remove, respectively, the power to "hear" an event of a particular type as it passes by the node during event propagation (described later in this chapter). Parameters for both methods are the same, so we'll focus on how to perform the event binding portion.

The syntax for the addEventListener() method is:

elementReference.addEventListener("eventType", functionReference, captureSwitch);

An eventType value is a string indicating the formal event type, which is the event name without the "on" prefix (i.e., just click instead of onclick). A function reference is the same kind that you use for object property event binding. The W3C DOM jargon calls this kind of function an event listener function, which means little more than the function should have a parameter variable to receive the event object that automatically gets passed to it. The third parameter is a Boolean value that determines whether the node should "listen" for the event in the capture portion of event propagation (described later in this chapter). The typical setting of this parameter is false.

To remain true to the W3C model, the specification permits browsers to accept traditional event binding mechanisms, including tag attributes. Such bindings are to behave as if the code invokes addEventListener() with the third parameter automatically set to false. This flexibility allows a browser such as Netscape 6 to implement the W3C DOM model, while allowing scripters to use event binding syntax that is compatible with other browsers, including older versions. But by using the newer syntax, you can explore several new event types that are linked directly to the W3C DOM's architecture. See Chapter 10 for more details on W3C DOM events and event object properties.

---

1. Don't confuse the IE feature with a proposed W3C standard, called XML Events, which may offer <script> tag attributes to bind events to elements. One may have inspired the other, but XML Events assumes implementation of the W3C DOM event model. (back)

[previous]

Created: August 29, 2002
Revised: August 29, 2002

URL: http://webreference.com/programming/javascript/dhtmlref/chap6/1/5.html