Scripting Event Handlers

JavaScript applications in the Navigator are largely event-driven. Events are actions that occur, usually as a result of something the user does.

For example, a button click is an event, as is giving focus to a form element. There is a specific set of events that Navigator recognizes. You can define Event handlers, scripts that are automatically executed when an event occurs.

Event handlers are embedded in documents as attributes of HTML tags to which you assign JavaScript code to execute. The general syntax is

<TAG eventHandler="JavaScript Code"> where TAG is some HTML tag and eventHandler is the name of the event handler.

For example, suppose you have created a JavaScript function called compute. You can cause Navigator to perform this function when the user clicks on a button by assigning the function call to the button's onClick event handler:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

You can put any JavaScript statements inside the quotes following onClick. These statements get executed when the user clicks on the button. If you want to include more than one statement, separate statements with a semicolon (;).

In general, it is a good idea to define functions for your event handlers because:

Notice in this example the use of this.form to refer to the current form. The keyword this refers to the current object-in the above example, the button object. The construct this.form then refers to the form containing the button. In the above example, the onClick event handler is a call to the compute() function, with this.form, the current form, as the parameter to the function.

Events apply to HTML tags as follows:

If an event applies to an HTML tag, then you can define an event handler for it. In general, an event handler has the name of the event, preceded by "on." For example, the event handler for the Focus event is onFocus.

Many objects also have methods that emulate events. For example, button has a click method that emulates the button being clicked. Note: The event-emulation methods do not trigger event-handlers. So, for example, the click method does not trigger an onClick event-handler. However, you can always call an event-handler directly (for example, you can call onClick explicitly in a script).

Event Occurs when... Event Handler
blur User removes input focus from form element onBlur
click User clicks on form element or link onClick
change User changes value of text, textarea, or select element onChange
focus User gives form element input focus onFocus
load User loads the page in the Navigator onLoad
mouseover User moves mouse pointer over a link or anchor onMouseOver
select User selects form element's input field onSelect
submit User submits a form onSubmit
unload User exits the page onUnload

Example 4: a script with a form and an event handler attribute.

<HEAD> <SCRIPT LANGUAGE="JavaScript"> function compute(form) { if (confirm("Are you sure?")) form.result.value = eval(form.expr.value) else alert("Please come back again.") } </SCRIPT> </HEAD> <BODY> <FORM> Enter an expression: <INPUT TYPE="text" NAME="expr" SIZE=15 > <INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)"> <BR> Result: <INPUT TYPE="text" NAME="result" SIZE=15 > <BR> </FORM> </BODY>

Example 4 page display.

Enter an expression:
Result:

Using Quotes

Be sure to alternate double quotes with single quotes. Since event handlers in HTML must be enclosed in quotes, you must use single quotes to delimit arguments. For example

<FORM NAME="myform">
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('stmtsov.html', 'newWin',
'toolbar=no,directories=no')">
</FORM>

Alternatively, you can escape quotes by preceding them by a backslash (\).