Intranet Journal: JavaScript By Example

Javascript Event Handlers
Built-in functions make interactivity a snap -- once you know how

By Reaz Hoque

// originally appeared in IDM v2n12 (June 1997)

An event handler executes a segment of a code based on certain events occurring within the application, such as onLoad or onClick. JavaScript event handers can be divided into two parts: interactive event handlers and non-interactive event handlers. An interactive event handler is the one that depends on user interaction with the form or the document.

For example, onMouseOver is an interactive event handler because it depends on the user's action with the mouse. An example of a non-interactive event handler is onLoad, as it automatically executes JavaScript code without the need for user interaction. Here are all the event handlers available in JavaScript.

Event Handler	Used In
onAbort onBlur onChange onClick onError onFocus onLoad onMouseOut onMouseOver onSelect onSubmit onUnload	image select, text, text area select, text, textarea button, checkbox, radio, link, reset, submit, area image select, text, testarea windows, image link, area link, area text, textarea form window

onAbort:
An onAbort event handler executes JavaScript code when the user
aborts loading an image.

<HTML>
<HEAD><TITLE> Example of onAbort Event Handler </TITLE>
</HEAD>

<BODY bgcolor="ffffff">
<H3>Example of onAbort Event Handler:</H3>
<STRONG>Stop the loading of this image
and see what happens:</STRONG><BR><BR>
<IMG  SRC="http://rhoque.com/rhoque.jpg"
onAbort="alert('You stopped loading the image!')">
</body>
</HTML>

Test This Script.

Here, an alert() method is called using the onAbort event handler when the user aborts loading the image.

onBlur
An onBlur event handler executes JavaScript code when input focus leaves the field of a text, textarea, or a select option. For windows, frames and framesets the event handler executes JavaScript code when the window loses focus. In windows you need to specify the event handler in the <BODY> attribute. For example,

<BODY BGCOLOR='#ffffff' onBlur="document.bgcolor='#000000'">

Note: With Microsoft Windows, the onBlur event does not work with <FRAMESET>.

Example:

<HTML>
<HEAD><TITLE> Example of onBlur Event Handler </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
        if (input<0){
alert("Please enter a value that is greater than 0");
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3>Example of onBlur Event Handler:</H3>
Try entering a value less than zero:<BR>
<form name="myform">
<input type="text" name="data" value=""
size="10" onBlur='valid(this.form)'>
</form>
</BODY>
</HTML>

Test This Script.

In this example, 'data' is a text field. When a user attempts to leave the field, the onBlur event handler calls the valid() function to confirm that 'data' has a legal value. Note that the keyword this is used to refer to the current object.

onChange
The onChange event handler executes JavaScript code when input focus exits the field after the user modifies its text.

Example:

<HTML>
<HEAD><TITLE> Example of onChange Event Handler </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
alert("You have changed the value from 10 to " + input );
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3>Example of onChange Event Handler</H3>
Try changing the value from 10 to something else:<BR>
<form name="myform">
<input type="text" name="data" value="10" size=10
onBlur='valid(this.form)'>
</form>
</BODY>
</HTML>

Test This Script.

In this example, 'data' is a text field. When a user attempts to leave the field after a change of the original value, the onChange event handler calls the valid() function which alerts the user about value that has been entered.

onClick
In an onClick event handler, a JavaScript function is called when an object in a button (regular, radio, reset and submit) is clicked, a link is pushed, a checkbox is checked or an image map area is selected. Except for the regular button and the area, the onClick event handler can return false to cancel the action. For example,

<INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit" onClick="return
confirm(`Are you sure you want to submit the form?')">

Note: With Microsoft IE 3.x the onClick event handler does not work with reset buttons.

Example:

<HTML>
<HEAD><TITLE> Example of onClick Event Handler</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
  var input=0;
  input=document.myform.data.value;
  alert("Hello " + input + "! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3>Example of onClick Event Handler</H3>
Click on the button after entering your
name into the text box:<BR>
<form name="myform">
<input type="text" name="data" value="" size=10>
<INPUT TYPE="button" VALUE="Click Here"
onClick="valid(this.form)">
</form>
</BODY>
</HTML>

Test This Script.

In this example, when the user clicks the button "Click Here", the onClick event handler calls the function valid().

Page 1 2 3