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

[previous] [next]

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

Binding Event Handlers to Elements

The first step in using events in a scriptable browser is determining which object and which event you need in order to trigger a scripted operation. With form elements, the choices are fairly straightforward, especially for mouse and keyboard events. For example, if you want some action to occur when the user clicks on a button object, you need to associate an onclick event handler with the button. The code that you add to your page to instruct an element to execute some script code in response to an event type performs what is called event binding. You have several ways to accomplish this vital task, a few of which work equally well in multiple DOMs.

Event Handlers as Tag Attributes

Perhaps the most common way to bind an event handler to an element is to embed the handler in the HTML tag for the element. Regardless of the document type you declare at the top of your document, browsers allow all of their native event handlers to be specified as attributes of HTML tags. Browsers acknowledge attributes without respect to case, but this may change in the future. All-lowercase event handler attribute names will ultimately prevail, and they are backward-compatible with all scriptable browsers. If you intend to pass your pages through an HTML or XHTML validator, limit tag attribute event binding to the event types supported by specific elements in the W3C specification, as detailed in Appendix E. For XHTML validation, be sure attribute names are all lowercase.

The value you assign to an event handler attribute is a string that can contain inline script statements:

<input type="button" value="Click Here" onclick="alert('You clicked me!');">

Or it can be a function invocation:

<input type="button" value="Click Here" onclick="handleClick();">

Multiple statements within the value are separated by semicolons:

<input type="button" value="Click Here" onclick="doFirst(); doSecond();">

You can pass parameter values to an event handler function, just as you would pass them to any function call, but there are also some nonobvious parameters that may be of value to an event handler function. For example, the this keyword is a reference to the element in whose tag the event handler appears. This technique is a backward-compatible way of conveying the target element reference to the function for early browsers that don't have an event object. In the following text field tag, the event handler passes a reference to that very text field object to a function named convertToUpper():

<input type="text" name="CITY" onchange="convertToUpper(this);">

The function can then use that parameter as a fully valid reference to the object, for reading or writing the object's properties:

function convertToUpper(field) {
    field.value = field.value.toUpperCase();
}

Once a generic function like this one is defined in the document, an onchange event handler in any text field element can invoke this single function with assurance that the result is placed in the changed field.

The this reference can also be used in the event handler to convey properties from an object. For example, if an event handler function must deal with multiple items in the same form, it is useful to send a reference to the form object as the parameter and let the function dig into the form object for specific elements and their properties. Since every form element has a form property, you can pass an element's form object reference with the parameter of this.form:

<input type="button" value="Convert All" onclick="convertAll(this.form);">

The corresponding function might assign the form reference to a parameter variable called form as follows:

function convertAll(form) {
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == "text") {
            form.elements[i].value = form.elements[i].value.toUpperCase();
        }
    }
}

If you bind an event handler to a tag attribute for use in Netscape 6 or later, you must explicitly pass the event object reference to the function. Do this by including the event keyword as the parameter (or one of the parameters):

<input type="button" value="Click Here" onclick="handleClick(event);">

The trend is to migrate event binding away from element attributes and toward the other approaches described next. Well-constructed element structures lend themselves to allowing the event object--and its reference to the target element--fill in for any parameters that you might pass from an event handler attribute. Moving event handlers out of elements, however, makes it more difficult to study code (including your own, old code whose operation you've forgotten) to see quickly how events are handled in the page.

[previous] [next]

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

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