Dynamic HTML: The Definitive Reference

Binding Event Handlers to Elements

The first step in using events in a scriptable browser is determining which object and which event you need 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. Some possibilities are not so obvious, however. For example, if you need to execute a script after a document loads (say, to adjust some style sheet rules in response to the size of the user’s browser window), you need to specify an onLoad event handler. For the onLoad event handler to fire, it must be associated with the BODY element or the window object (by a quirk of HTML tag structure, all window object event handlers are associated with the BODY element).

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. All event handlers can be specified as attributes of HTML tags. Such attribute names are case insensitive. The value you assign to one of these attributes can be a string that contains 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: ...