Home Free Templets Works Mind Chiller Photo Gallery Family & Friends Links
 
 
   
     
           
           
           
           
   
Javascript Events Tutorial
     
           
   
Event

Applies To:

Triggered When:

onClick

Button, Document, Checkbox, Link, Radio, Reset, Submit The object is clicked on.
onChange FileUpload, Select, Text, TextArea The user types anything on the control.
onSubmit Form The form's Submit button is clicked.
onMouseDown Button, Document, Link The user presses a mouse button.
onMouseMove Image (NOT NS4), Link ,span,div The user moves the mouse.
onMouseOut Image (NOT NS4), Link ,span,div The user moves the mouse away from the object.
onMouseOver Image (NOT NS4), Link ,span,div The user moves the mouse over the object.
onMouseUp Button, Document, Link ,span,div The user releases a mouse button.
onMove Window The user moves the browser window or frame.
onFocus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window The object in question gains focus (e.g. by clicking on it or pressing the TAB key).
onBlur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window The object in question loses focus (e.g. by clicking outside it or pressing the TAB key).
onKeyDown Document, Image, Link, TextArea The user presses a key.
onKeyPress Document, Image, Link, TextArea The user presses or holds down a key.
onDblClick Document, Link The object is double-clicked on.
onDragDrop Window An icon is dragged and dropped into the browser.
onError Image, Window A JavaScript error occurs.
onKeyUp Document, Image, Link, TextArea The user releases a key.
onLoad Image, Window

The whole page has finished loading.

onReset Form The user clicks the form's Reset button.
onResize Window The user resizes the browser window or frame.
onSelect Text, Textarea The user selects text within the field.

onAbort

Image The loading of the image is cancelled.
onUnload Window The user leaves the page.

Some commonly used events are discussed here:

onClick :

<input type="submit" name="clickme" value="Click Me!" onClick="alert('Thank You!')" >




In this example, an alert box is displayed when you click on the link below.

<a href="#" onClick="alert('Thanks!')">Click Me!</a>

Click Me!

onLoad

The onLoad event handler is triggered when the page has finished loading. Common uses of onLoad is the pop-up advertisement windows.

Example

This simple example displays current time in an alert box when the page has finished loading:

<html> <body onLoad = "alert(new date()) "> My Page </body> </html>

onMouseOut, onMouseOver

The classic use of these two event handlers is for JavaScript rollover images. In the the following example , when you move move your mouse over the link the "onMouseOver" event of the link is fired , and on the text box it is shown. Similerly , when the mouse moves away from the link, "onMouseOut" event of the link is fired .

The Code

<form name ="f1">
<center>
<input type="text" name="status" value="mouse on the Link">
<br>
<a href="" onmouseover=" document.f1.status.value='mouse on the Link'" onmouseout="document.f1.status.value='mouse Not on the Link'">Move the Mouse Over Me!</a>
</center>
</form>


Move the Mouse Over Me!

onKeyUp

This event fires when user moves his finger out of a key. In the following example there are two textboxes , user types on the first textbox and the value is autometically copied to the other textbox.
<form action="" name ="f3" method="get">
<p>
<input name="t1" type="text" value="Type Something" onKeyUp="document.f3.t2.value=document.f3.t1.value">
</p>
<p> <input name="t2" type="text" id="t2">
</p>
</form>

























































Back to Tutorial Index page

Your comments are most welcome admin@koderguru.com


Back to Tutorial Index page

Comment on this tutorial admin@koderguru.com