Javascript Events


Javascript Events

Events are actions that can be detected by JavaScript. For example - a mouse clicking, a mouse hovering on a text. Based upon the detection of the events we can take some actions.

There is a long list of the events recognised by Javascript. We will cover some basic javascript events and examples in this chapter.

onload event


The onload events is triggered when the user enters the page. 


<html>
<head>
<script type="text/javascript">
<!--
/*
********************************************************
Example onload event - referencedesigner.com
********************************************************
*/
function alertmessage()
{
alert("Welcome to Referencedesigner.com Javascript Tutorial");
}
//-->
</script>
</head>
<body  onload="alertmessage()" >
</body>
</html>




You may like to try this example here.

This example does not seem to do anything meaningful. But it can be a useful functin when used with jQuery.

Note the following structure

<body onload="alertmessage()" >

As soon as the body section starts the onload event is triggerred. The event transfers the control to alertmessage. The alertmessage pops up an alert box.
An onload event is usually used to record the ip address, set cookies, check explorer and do first time settings.

OnMouseOver event


The OnMouseOver events is triggered when the user hovers the mouse over an object. They are often used to create animated buttons.

Example


<html>
<head>
<script type="text/javascript">
<!--
/*
********************************************************
Example OnMouseOver event
********************************************************
*/

//-->
</script>
<body>
<img src="beautifulgirl.jpg" width="100" onmouseover="alert('Dont touch beautiful girl');return false">
</body >
</html>


Note the following structure
<img src="beautifulgirl.jpg" width="100" onmouseover="alert('Dont touch beautiful girl');return false">

As soon as the mouse hovers over the image beautifulgirl.jpg OnMouseOver event is triggerred. The event in turn calls a alert box and an alert message box pops up.box.


You may like to try this example here.