JavaScript Event Handlers

This tutorial is part of the Web Development Resources collection.

It is taken from Reaz Hoque's forthcoming book, Practical JavaScript Programming, published by MIS Press.

An event handler executes a segment of a code based on certain events occurring within the application, such as onLoad, 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 the user interactivity with the form or the document. For example, onMouseOver is an interactive event handler because it depends on the users action with the mouse. On the other hand non-interactive event handler would be onLoad, because this event handler would automatically execute JavaScript code without the user's interactivity. Here are all the event handlers available in JavaScript:

Event Handler	Used In
onAbort onBlur onChange onClick onError onFocus onLoad onMouseOver onMouseOut 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.

See Example:

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

<BODY>
<H3>Example of onAbort Event Handler</H3>
<b>Stop the loading of this image and see what happens:</b><p>
<IMG SRC="reaz.gif" onAbort="alert('You stopped the loading the image!')">
</BODY>
</HTML>

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: On a Windows platform, the onBlur event does not work with <FRAMESET>.

See Example:

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

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.

See Example:

<HTML>
<TITLE>Example of onChange Event Handler</TITLE>
<HEAD>
<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>
<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 onChange="valid(this.form)">
</form>
</BODY>
</HTML>

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 inputted.

onClick:

In an onClick event handler, 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: On Windows platform, the onClick event handler does not work with reset buttons.

See Example:

<HTML>
<TITLE>Example of onClick Event Handler</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
    var input=0;
    input=document.myform.data.value;	
    alert("Hello " + input + " ! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onClick Event Handler </H3>
Click on the button after inputting 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>

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

onError:

An onError event handler executes JavaScript code when an error occurs while loading a document or an image. With onError event now you can turn off the standard JavaScript error messages and have your own function that will trace all the errors in the script. To disable all the standard JavaScript error messages, all you need to do is set window.onerror=null. To call a function when an error occurs all you need to do is this: onError="myerrorfunction()".

See Example:

<HTML>
<TITLE>Example of onError event handler</TITLE>
<HEAD>
<SCRIPT Language="JavaScript">
window.onerror = ErrorSetting

var e_msg="";
var e_file="";
var e_line="";

document.form[8].value="myButton"; //This is the error

function ErrorSetting(msg, file_loc, line_no) {
	e_msg=msg;
	e_file=file_loc;
	e_line=line_no;
	return true; 
}

function display() {
	var   error_d = "Error in file: " + e_file + 
      		            "\nline number:" + e_line +
	      	             "\nMessage:" + e_msg;
	alert("Error Window:\n"+error_d);
		
}

</SCRIPT>
</HEAD>

<BODY>
<h3> Example of onError event handler </h3>
<form>
<input type="button" value="Show the error" onClick="display()"></form>
</body>
</HTML>

Notice that the function ErrorSetting() takes three arguments: message text, URL and Line number of the error line. So all we did was invoke the function when an error occured and set these values to three different variables. Finally, we displayed the values via an alert method.

Note: If you set the function ErrorSetting() to False, the standard dialog will be seen.

onFocus:

An onFocus event handler executes JavaScript code when input focus enters the field either by tabbing in or by clicking but not selecting input from the field. For windows, frames and framesets the event handler executes JavaScript code when the window gets focused. In windows you need to specify the event handler in the <BODY> attribute. For example:

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

Note: On a Windows platform, the onFocus event handler does not work with <FRAMESET>.

See Example:

<HTML>
<TITLE>Example of onFocus Event Handler</TITLE>
<HEAD></HEAD>
<BODY>
<H3>Example of onFocus Event Handler</H3>
Click your mouse in the text box:<br>
<form name="myform">
 <input type="text" name="data" value="" size=10 onFocus='alert("You focused the textbox!!")'>
</form>
</BODY>
</HTML>

In the above example, when you put your mouse on the text box, an alert() message displays a message.

onLoad:

An onLoad event occurs when a window or image finishes loading. For windows, this event handler is specified in the BODY attribute of the window. In an image, the event handler will execute handler text when the image is loaded. For example:

<IMG NAME="myimage" SRC="http://rhoque.com/ad_rh.jpg" onLoad="alert('You loaded myimage')">

See Example:

<HTML>
<TITLE>Example of onLoad Event Handler</TITLE>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function hello(){
    alert("Hello there...\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>

The example shows how the function hello() is called by using the onLoad event handler.

onMouseOver:

JavaScript code is called when the mouse is placed over a specific link or an object or area from outside that object or area. For area object the event handler is specified with the <AREA> tag. For example:

<MAP NAME="mymap">
<AREA NAME="FirstArea" COORDS="0,0,49,25" HREF="mylink.html"
	onMouseOver="self.status='This will take you to mylink.html'; return true">
</MAP>

See Example:

<HTML>
<TITLE>Example of onMouseOver Event Handler</TITLE>
<HEAD>
</HEAD>
<BODY>
<H3> Example of onMouseOver Event Handler </H3>
Put your mouse over <A HREF="" onMouseOver="window.status='Hello! How are you?' ; return true;"> here</a>
and look at the status bar (usually at the bottom of your browser window).
</BODY>
</HTML>

In the above example when you point your mouse to the link, the text "Hello! How are you?" appears on your window's status bar.

onMouseOut:

JavaScript code is called when the mouse leaves a specific link or an object or area from outside that object or area. For area object the event handler is specified with the <AREA> tag.

See Example:

<HTML>
<TITLE> Example of onMouseOut Event Handler </TITLE>
<HEAD>
</HEAD>
<BODY>
<H3> Example of onMouseOut Event Handler </H3>
Put your mouse over <A HREF="" onMouseOut="window.status='You left the link!' ; return true;"> here</a> and then take the mouse pointer away.
</BODY>
</HTML>

In the above example, after pointing your mouse and leaving the link , the text "You left the link!" appears on your window's staus bar.

onReset:

A onReset event handler executes JavaScript code when the user resets a form by clicking on the reset button.

See Example:

<HTML>
<TITLE>Example of onReset Event Handler</TITLE>
<HEAD></HEAD>
<BODY>
<H3> Example of onReset Event Handler </H3>
Please type something in the text box and press the reset button:<br>
<form name="myform" onReset="alert('This will reset the form!')">
 <input type="text" name="data" value="" size="20">
<input type="reset" Value="Reset Form" name="myreset">
</form>
</BODY>
</HTML>

In the above example, when you push the button, "Reset Form" after typing something, the alert method displays the message, "This will reset the form!"

onSelect:

A onSelect event handler executes JavaScript code when the user selects some of the text within a text or textarea field.

See Example:

<HTML>
<TITLE>Example of onSelect Event Handler</TITLE>
<HEAD></HEAD>
<BODY>
<H3>Example of onSelect Event Handler</H3>
Select the text from the text box:<br>
<form name="myform">
<input type="text" name="data" value="Select This" size=20 onSelect="alert('This is an example of onSelect!!')">
</form>
</BODY>
</HTML>

In the above example, when you try to select the text or part of the text, the alert method displays the message, "This is an example of onSelect!!".

onSubmit:

An onSubmit event handler calls JavaScript code when the form is submitted.

See Example:

<HTML>
<TITLE> Example of onSubmit Event Handler </TITLE>
<HEAD>
</HEAD>
<BODY>
<H3>Example of onSubmit Event Handler </H3>
Type your name and press the button<br>
<form name="myform" onSubmit="alert('Thank you ' + myform.data.value +'!')">
<input type="text" name="data">
<input type="submit" name ="submit" value="Submit this form">
</form>
</BODY>

In this example, the onSubmit event handler calls an alert() function when the button "Sumbit this form" is pressed.

onUnload:

An onUnload event handler calls JavaScript code when a document is exited.

See Example:

<HTML>
<TITLE>Example 2.11</TITLE>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function goodbye(){
        alert("Thanks for Visiting!");
        }
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbye()">
<H3>Example of onUnload event handler</H3>
Look what happens when you try to leave this page...
</BODY>
</HTML>

In this example, the onUnload event handler calls the Goodbye() function as user exits a document.

Note: You can also call JavaScript code via explicit event handler call. For example say you have a function called myfunction(). You could call this function like this:

document.form.mybotton.onclick=myfunction

Notice that you don't need to put () after the function and also the event handler has to be spelled out in lowercase.

Brought to you by eBORcOM