Javascript Events

An event is an unexpected external occurrence. Most JavaScript-applications perform actions as a response to events. An event is a signal from the browser that something has happened. Javascript provides events and event handlers to handle user interactions. These events and event handlers are as follows:

Abort:

Uses the event handler onAbort to handle aborting of an image loaded by the user.

Javascript Abort Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript Abort Event</legend>
<H3>Example of onAbort Event Handler</H3>
<b>Stop the loading of this image and see what happens:</b><p>
<IMG SRC="http://www.techstrikers.com/images/bird_c.gif" 
onAbort="alert('You stopped the loading the image!')">
</fieldset>
</body>  
</html>

Blur:

Uses onBlur handler to handle the event when an element, window or fram looses input focus.

Javascript Blur Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript Blur Event</legend>
<script type="text/javascript">
function valid(form){
    var input=10;
    input=document.myform.data.value;
	if (input<10){
	    alert("Please input a value that is less than 10");
	}
}
</script>
<H3> Example of onBlur Event Handler</H3>
Try inputting a value less than 10:<br>
<form name="myform">
 <input type="text" name="data" value="" size=10 onBlur="valid(this.form)">
</form>
</fieldset>
</body>  
</html>

Change:

Uses onChange handler to handle change in the value of a text field or area.

Javascript Change Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript Change Event</legend>
<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>
</fieldset>
</body>  
</html>

Click:

Uses onClick handler when an object in a form is clicked.

Javascript Click Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnClick Event</legend>
<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>
</fieldset>
</body>  
</html>

DblClick:

Uses a ondblClick handler to handle double clicking of a form object or link by the user.

Javascript DblClick Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnDblClick Event</legend>
<script type="text/javascript">
	function OnDblClickSpan () {
		alert ("You have double-clicked on the text!");
	}
</script>
<span ondblclick="OnDblClickSpan ()">Click on me twice and fast!</span>
</fieldset>
</body>  
</html>

Error:

onError handler is used when there is an error in loading a document or an image.

Javascript Error Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnError Event</legend>
<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>
</fieldset>
</body>  
</html>

Focus:

Uses an onFocus handler to handle events like receiving of events by a window or frame.

Javascript Focus Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnFocus Event</legend>
<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>
</fieldset>
</body>  
</html>

Load:

Uses an onLoad handle to handle the event when the browser finishes loading a browser window.

Javascript Load Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript onLoad Event</legend>
<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>
</fieldset>
</body>  
</html>

MouseOver:

Uses an onMouseOver handler when the curser move over an area.

Javascript MouseOver Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnMouseOver Event</legend>
<H3> Example of onMouseOver Event Handler </H3>
Put your mouse over <A HREF="" 
onMouseOver="alert('Hello! How are you?');"> here</a>
and look at the status bar (usually at the bottom of your browser window).
</fieldset>
</body>  
</html>

MouseOut:

Uses an onMouseOut handler when the curser out from an area.

Javascript MouseOut Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnMouseOut Event</legend>
<H3> Example of onMouseOut Event Handler </H3>
Put your mouse over <A HREF="" 
onMouseOut="alert('You left the link!');"> here</a> 
and then take the mouse pointer away.
</fieldset>
</body>  
</html>

MouseOut:

Uses an onMouseOut handler when the curser out from an area.

Javascript MouseOver Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnMouseOut Event</legend>
<H3> Example of onMouseOut Event Handler </H3>
Put your mouse over <A HREF="" 
onMouseOut="alert('You left the link!');"> here</a> 
and then take the mouse pointer away.
</fieldset>
</body>  
</html>

Reset:

Uses an onReset handler to handle the event when a form is reset.

Javascript Reset Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnReset Event</legend>
<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>
</fieldset>
</body>  
</html>

Submit:

Uses onSubmit handler to handle the event when the user submit the form.

Javascript Submit Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnSubmit Event</legend>
<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">
</fieldset>
</body>  
</html>

Unload:

Uses onUnload handler to handle the event when the user exits a document.

Javascript Unload Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnUnload Event</legend>
<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...
</fieldset>
</body>  
</html>

KeyDown:

Uses onKeyDown to handle the event of user depressing a key.

Javascript KeyDown Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnKeyDown Event</legend>
<script type="text/javascript">
	function GetChar (event){
		var keyCode = ('which' in event) ? event.which : event.keyCode;
		alert ("The Unicode key code is: " + keyCode);
	}
</script>
</HEAD>
<BODY>
<input size="40" value="Write a character into this field!" 
onkeydown="GetChar (event);"/>
</fieldset>
</body>  
</html>

KeyPress:

Uses onKeyPress handler to process key presses.

Javascript KeyPress Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnKeyPress Event</legend>
<script type="text/javascript">
	function GetChar (event){
            var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
            alert ("The Unicode character code is: " + chCode);
    }
</script>
</HEAD>
<BODY>
<input size="40" value="Write a character into this field!" 
onkeypress="GetChar (event);"/>
</fieldset>
</body>  
</html>

KeyUp:

Uses onKeyUp handler to process events like user releasing a key.

Javascript KeyUp Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript OnKeyUp Event</legend>
<script type="text/javascript">
	 function GetChar (event){
            var keyCode = ('which' in event) ? event.which : event.keyCode;
            alert ("The Unicode key code of the released key: " + keyCode);
     }
</script>
</HEAD>
<BODY>
<input size="40" value="Write a character into this field!" 
onkeyup="GetChar (event);"/>
</fieldset>
</body>  
</html>

MouseDown:

Uses onMouseDown handler when the user presses mouse button.

Javascript MouseDown Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript onMouseDown Event</legend>
</HEAD>
<BODY">
<button onmousedown="alert('Mouse Down!!')">Test button</button>
</fieldset>
</body>  
</html>

MouseUp:

Uses onMouseUp handler when the user releases a mouse button.

Javascript MouseUp Event Example

<!DOCTYPE html>
<html>  
<head>  <!-- www.techstrikers.com -->
<title>My first Javascript code</title>   
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>Javascript onMouseUp Event</legend>
</HEAD>
<BODY>
<button onmouseup="alert('Mouse Up!!!');">Test button</button>
</fieldset>
</body>  
</html>

HTML 4 Standard Events

The standard HTML 4 events are listed here for your reference. Here script indicates a Javascript function to be executed agains that event.

Event Value Description
onchange script Script runs when the element changes
onsubmit script Script runs when the form is submitted
onreset script Script runs when the form is reset
onselect script Script runs when the element is selected
onblur script Script runs when the element loses focus
onfocus script Script runs when the element gets focus
onkeydown script Script runs when key is pressed
onkeypress script Script runs when key is pressed and released
onkeyup script Script runs when key is released
onclick script Script runs when a mouse click
ondblclick script Script runs when a mouse double-click
onmousedown script Script runs when mouse button is pressed
onmousemove script Script runs when mouse pointer moves
onmouseout script Script runs when mouse pointer moves out of an element
onmouseover script Script runs when mouse pointer moves over an element
onmouseup script Script runs when mouse button is released