The Navigator Event Model: Event Handlers as Properties - Doc JavaScript

Event Handlers as Properties

When JavaScript 1.0 debuted in Netscape Navigator 2.0x way back in February 1996, the only way to capture events was to specify event handlers as HTML tag attributes. Most objects in the object model had one or more events that could be captured in this method. Since event handlers were always placed in the corresponding tag, they were read-only properties in JavaScript. Once the page loaded, you couldn't change the event handler script. The attribute approach is still supported (and is often the best choice), but additional functionality has been introduced along the way.

Netscape Navigator 3.0x advanced the event model by making it possible to assign a function to an object's event handler. The general syntax for such an operation is:

object.eventhandler = function;

Here's an example:

window.onload = welcome;

This statement assigns the function welcome() to the window's onload event handler. Notice that the event handler must be written in all-lowercase (onload rather than onLoad). Although Netscape Navigator 4.0x doesn't require all-lowercase notation, Netscape Navigator 3.0x still does. Therefore, write event handlers in all-lowercase -- it's backward compatible. Also notice that the event handler property must be assigned a function reference, as opposed to a function call. Thus, you must assign welcome, not welcome(), which is primarily a function call, evaluating to the type and value the function returns. Also, since the event handler HTML attributes are literal function bodies, you cannot use <INPUT ... onClick=welcome> or <INPUT ... onClick="welcome"> in the HTML source. Take a look at the following document (from the previous section):

<HTML>
<HEAD>
<TITLE>Hello</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function welcome() {
  alert("Hello");
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="welcome()">
</BODY>
</HTML>

And here's the JavaScript 1.1 (and above) equivalent:

<HTML>
<HEAD>
<TITLE>Hello</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function welcome() {
  alert("Hello");
}
window.onload = welcome;
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

This technique enables flexibe event handlers, because you can modify them anywhere in the script. You can even create a customized page that allows the user to determine what a certain button or link should do when clicked.

The following code segment is also based on an example from the previous section:

<SCRIPT LANGUAGE="JavaScript">
<!--
function clicked() {
  alert("You clicked a button.");
}
// -->
</SCRIPT>
<FORM NAME="myForm">
<INPUT TYPE="button" VALUE="click here"
       NAME="myButton" onClick="clicked()">
</FORM>

In theory, the JavaScript 1.1 equivalent would be:

<SCRIPT LANGUAGE="JavaScript">
<!--
function clicked() {
  alert("You clicked a button.");
}
document.myForm.myButton.onclick = clicked;
// -->
</SCRIPT>
<FORM NAME="myForm">
<INPUT TYPE="button" VALUE="click here" NAME="myButton">
</FORM>

But this script generates a JavaScript error! Why? Because it accesses a property of the document.myForm object before it's actually created. You may only assign a function reference to an event handler after its corresponding element has been created. One way to solve this problem is to revert the script-element order:

<FORM NAME="myForm">
<INPUT TYPE="button" VALUE="click here" NAME="myButton">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function clicked() {
  alert("You clicked a button.");
}
document.myForm.myButton.onclick = clicked;
// -->
</SCRIPT>

A better (and safer) way to solve this issue is to define all functions in the document's <HEAD>...</HEAD> portion. Then assign a function to the event handler in a separate script, after the element's HTML code, or in a function that's called from the onLoad event handler. The following HTML documents demonstrate both techniques:

<!-- first technique -->
<HTML>
<HEAD>
<TITLE>Hello</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function clicked() {
  alert("You clicked a button.");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myForm">
<INPUT TYPE="button" VALUE="click here" NAME="myButton">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.myForm.myButton.onclick = clicked;
// -->
</SCRIPT>
</BODY>
</HTML>

<!-- second technique -->
<HTML>
<HEAD>
<TITLE>Hello</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function defineEvents() {
  // this works because the onLoad event handler
  // is called after the entire page has loaded
  document.myForm.myButton.onclick = clicked;
}
function clicked() {
  alert("You clicked a button.");
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="defineEvents()">
<FORM NAME="myForm">
<INPUT TYPE="button" VALUE="click here" NAME="myButton">
</FORM>
</BODY>
</HTML>

The following table lists the event handlers supported in JavaScript 1.0 (Netscape Navigator 2.0x) and JavaScript 1.1 (Netscape Navigator 3.0x):

Object	Event Handler Property
`window`	`onload` `onunload` `onblur` `onfocus`
`link`	`onclick` `onmouseout`^* `onmouseover`
`area`^*	`onmouseout`^* `onmouseover`^*
`image`^*	`onabort`^* `onerror`^* `onload`^*
`form`	`onreset`^* `onsubmit`
`text` `textarea` `password`	`onblur` `onchange` `onfocus` `onselect`
`button` `reset` `submit` `radio` `checkbox`	`onclick`
`select`	`onblur onchange onfocus`
`fileUpload`^*	`onblur`^* `onfocus`^* `onselect`^*

^* Objects or events that are not supported in JavaScript 1.0.

Created: December 16, 1997
Revised: December 16, 1997

URL: https://www.webreference.com/js/column9/properties.html

The Navigator Event Model: Event Handlers as Properties - Doc JavaScript

Event Handlers as Properties

Find a programming school near you