Home / code / javascript

Event handlers in Javascript

Defining an Event Handler

You define an event handler (a javascript function or series of statements) to handle an event. If an event applies to an HTML tag (that i, the event applies to the JavaScript object created from that tag), then you can define an event handler for it . The name of an event handler is the name of the event, preceded by "on". For example, the event handler for the focus event is onFocus.

To create an event handler for an HTML tag, add an event handler attribute to the tag. Put JavaScript code in quotation marks as the attribute value.

<TAG eventHandler="JavaScript Code">
where TAG is and HTML tag, eventHandler is the name of the event handler, and JavaScript Code is a sequence of JavaScript statements.

For example, suppose you have created a JavaScript function called compute. You make the browser call this function when the user clicks 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 as the value of the onClick attribute. These statements are executed when the user clicks the button. To include more than one statement, separated statements with semicolons (;).

Notice that in the preceding example, this.form refers to the current form. The keyword this refers to the current object, which in this case is the button. The construct this.form then refers to the form containing the button. The onClick event handler is a call to the compute function, with the current form as the argument.

When you create an event handler, the corresponding JavaScript object gets a property with the name of the event handler. This property allows you to access the object's event handler. For example, in the preceding example, JavaScript creates a Button object with an onClick property whose value is "compute(this.form)".

Be sure to alternate double quotation marks with the single quotation marks. Because event handlers in HTML must be enclosed in quotation marks, you must use single quotation marks to delimit string arguments.
For example:

<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!" onClick="window.open('mydoc.html', 'newWin')">
In general, it is good practice to define functions for your event handlers instead of using multiple JavaScript statements:
  • It makes your code modular - you can use the same function as an event handler for many different items.
  • It makes your code easier to read.

Example: Using an Event Handler

In the form shown in the following figure, you can enter an expression (for example, 2+2) in the first text field, and then click the button. The second text field then displays the value of the expression (in this case, 4).
The script for the form is as follows: 

<HTML>
<HEAD>
<SCRIPT>
<!--- Hide script from old browsers
function compute(f)
{
  if (confirm("Are you sure?"))
	f.result.value = eval(f.expr.value)
  else
	alert("Please come back again.")
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>

<BODY>
<FORM>
Enter a 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>
</FORM>
</BODY>
</HTML>
The HEAD of the document defines a single function, compute, taking one argument, f, which is a Form object. The function uses the window.confirm method to display a Confirm dialog box with OK and Cancel buttons.

If the user clicks OK, then confirm returns true, and the value of the result text field is set to the value of eval (f.expr.value). The JavaScript function eval evaluates its argument, which can be any string representing any JavaScript expression or statements.

If the user clicks Cancel, then confirm returns false and the alert method displays another message.

The form contains a button with a onClick event handler that calls the compute function. When the user clicks the button, JavaScript calls compute with the argument this.form that denotes the current Form object. In compute, this form is referred to as the argument f.

 

TOP

Latest script:

 

Books: