Defining Event Handlers: Variations

We've already seen the de facto standard technique of defining an event handler as an attribute of its target element's HTML tag. This is a perfectly good practice which is appropriate most of the time. There is an alternative, though, and that is to define an event handler explicitly in a JavaScript assignment statement. The most likely reason to use this technique is to change the event handler for an element.

Netscape

Let's say that you've defined a button with an onClick event handler.

<form name="buttonForm">
 <input 
  type="button" 
  name="clickme" 
  value="Click Me!" 
  onClick="clickfunc1();">
</form>

It may come to pass that you would like to change clickme's event handler to a different function, say, clickfunc2(). You can assign a new event handler to the Click event of the button element named clickme:

document.buttonForm.clickme.onclick=clickfunc2;

Notice the omission of parentheses in reference to clickfunc2 -- this causes the assignment statement to point to the named function rather than execute it on the spot! A question arises ... if you can't include the parentheses, how can you include parameters to pass to the function? The answer: you cannot. By default, Navigator will pass one parameter, the event object. The named function must therefore accept no parameters or only one, expecting the event object. Otherwise, this assignment-based technique will not work.

Microsoft

The assignment technique for explicitly defining an event handler for an element illustrated above works in Internet Explorer as well. However, there is one crucial difference: whereas Navigator implicitly passes the event object as a parameter, IE does not. Therefore, the statement:

document.buttonForm.clickme.onclick=clickfunc2;

Will call clickfunc2() but will not pass any parameters. This is not a major crisis in IE because you are allowed to access the event object from within the function, not only from within the event handler as is the case in Navigator. Therefore, your clickfunc2() event handler may look like the following and remain Explorer-compatible:

function clickfunc2()
{ coordX=event.screenX }

Microsoft supports yet another alternative approach to defining an event handler, based on the <SCRIPT> tag. You can create a custom script which applies only to a particular event on a particular element using Microsoft-specific FOR and EVENT attributes of this tag. In this example we use this method to attach an event to the following form button:

<form name="buttonForm">
 <input 
  type="button" 
  name="clickme" 
  value="Click Me!">
</form>

<script 
 for="clickme" 
 event="onclick" 
 language="JavaScript">
...JavaScript code which handles the event...
</script>

As you can see, rather than include an onClick attribute in the <INPUT> tag we've created a distinct script segment which applies only to a Click event on the clickme button. What is the great advantage of this approach? Not much really, but it is worth noting that event handlers defined in the above manner take precedence over event handlers defined using the inline tag approach. Because the <SCRIPT> technique is only supported by Internet Explorer you will most commonly see it used on pages which are created for IE intranets by developers who were weaned on Microsoft seminars.

The Event Object
Events in JavaScript: An Inside Look
Supported Events and Target Elements