Event Handlers

Event handlers are very powerful and useful part of Javascript! They are JavaScript code that are not added inside the script tags, but rather, inside the html tags, that execute JavaScript when something happens, such as pressing a button, moving your mouse over a link, submitting a form etc. The basic syntax of these event have been discussed below

name_of_handler='JavaScript code here'

For example:

<a href='abc.com' onClick='alert('hello!')'>Google</a>

In this way, once the link is clicked, it first gives an alert message and then follow the link. We can also avoid it from following the link, if we use return false along with the alert mesaage. This is required if we want to call a function and dont wish the window to go to any other location. We will be giving exaples for that in our functions chapter. For the time being, you should keep in mind that functions are basically a set of statements which execute simultaneously to obtain a result. Every function has a name, except, if it is an inline function. It can be called anywhere using its name.

Here are some basic event handler that are used most of the time :-

onclick:	 	Use this to invoke JavaScript upon clicking (a link, or form boxes)
onload:	 	    Use this to invoke JavaScript after everything has finished loading.
onmouseover:	Use this to invoke JavaScript if the mouse passes by some link
onmouseout:	 	Use this to invoke JavaScript if the mouse goes pass some link
onunload:	 	Use this to invoke JavaScript right after someone leaves this page.

Onclick event handler

This event handler is used when you wish to invoke a function or take some other steps when the user clicks a link or a button.

function inform(){
alert('You called me by clicking that button');

<input type='button' name='test' value='Click me' onclick='inform()'>

onLoad Event handler

The onload event handler is used to call the execution of JavaScript after a page, frame or image has completely loaded. It is added like this :-

<body onload='inform()'> 
//Execution of code will begin after the page has loaded.

<frameset onload='inform()'>
 //Execution of code will begin after the current frame has loaded.

<img src='pic.gif' onload='inform()'> 
//Execution of code will begin after the image has loaded.

onMouseover and onMouseout

The onMouseover and onMouseout event handlers,just like the "onClick" event, can be added to visible elements such as a link , DIV, even inside the body tag, and are triggered when the mouse moves over and out of the element . Lets see an example to make this handler more clear.

<a href='#' onmouseover='doSomething();return false;' >Hover me</a>

onUnload Event handler

onunload executes JavaScript immediately after someone leaves the page. A common use (though not that great) is to thank someone as that person leaves your page for coming and visiting.

<body onunload='alert('Thank you for the visit')'>

Lets have a look at the core part of Javascript i.e. functions

Member Login

Member Login

Not a Member? Sign Up!

Login to comment

Be the first to comment on this topic


<<< Wanna review

Continue >>>