JavaScript Tutorial

Events is the main part of of the JavaScript application, events are signals that can generated when specific actions occur. When the user clicks a button an event is generated.

An event is also a action performed on a webpage by the user such as clicking a button or entering text into a textbox for generating an event.

There are different type of Event supported by javascript as given below :-

Event	Description
Onmouse click	when a mouse click event generated
On mouseover	when the user moves the pointer over a web page
Onmouseout	when mouse pointer moves out of an element
Onchange	when a user change the value of a field
Onselect	when the element is selected
Onreset	runs when the script form is reset
abort	its Occurs when the user cancels loading of an image
onkeypress	runs when mouse button is pressed
onsubmit	Script runs when the form is submitted
on dblclick	its runs when a mouse double-click
error	its occurs during loading of a document or image
onblur	Script runs when the element loses focus
onfocus	its runs when the element gets focus
load	its Occurs when a page is loaded into Navigator
unload	its Occurs when the user leaves a page

Examlpe of Onmouse click event :

Onmouse click event is occurs when mouse click on any button.

<html>
<head>
<script>

function sayHello()
 {
   alert("Hello javascript")
}

</script>

<input type="button"  value="click"  onclick="sayHello()"/>

</body>
</html>

Output :

User click on button then message will shown

Mouseover event

Mouseover event will be occurred when the cursor over the control for first time.

Example :

<head>
    <script>
        function OnMouseIn (elem) {
            elem.style.border = "4px solid black";
        }
        function OnMouseOut (elem) {
            elem.style.border = "";
        }
    </script>
</head>
<body>
    <div style="background-color:pink; width:350px" 
            onmouseover="OnMouseIn (this)" onmouseout="OnMouseOut (this)">
        <p>Move your mouse in rectangle pointer and see effect </p
    </div>
</body>

Output :

before Mouseover

After Mouseover

Onmouseout

its show the effect when mouse over the statement and when mouse out of statement.

Example :

<html>
<head>
<script>
function rollover(target){
    target.style.background = "red";
}
function rollout(target){
    target.style.background = "magenta";
}
</script>
<div onmouseover=
"rollover(this)"
 onmouseout="rollout(this)"
> Mouse out of the statement then colour will be changed;
  </br> and mouse 
  in of statement then again colour will be changed  </div>

</script>
<head>
<html>