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:

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

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>
Try Now

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

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>
Try Now

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

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>
Try Now

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

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>
Try Now

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

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>
Try Now

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

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>
Try Now

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

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>
Try Now

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

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>
Try Now

9. MouseOver: Uses an onMouseOver handler when the curser move over an area.

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>
Try Now

10. MouseOut: Uses an onMouseOut handler when the curser out from an area.

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>
Try Now

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

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>
Try Now

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

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>
Try Now

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

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>
Try Now

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

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>
Try Now

15. KeyPress: Uses onKeyPress handler to process key presses.

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>
Try Now

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

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>
Try Now

17. MouseDown:Uses onMouseDown handler when the user presses mouse button.

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>
Try Now

18. MouseUp:Uses onMouseUp handler when the user releases a mouse button.

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>
Try Now

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

See Also

Javascript Built in String Object
Javascript Built in Number Object
Javascript Built in Math Object
Javascript Built in Date Object
Javascript Built in Arrays Object
Javascript Built in Boolean Object
Javascript Built in RegExp Object
Javascript Built in JSON Object


 
SHARE THIS IF YOU LIKE!
submit to reddit
SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.