JavaScript Tutorial

adplus-dvertising
Events In JavaScript
Previous Home Next

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>

Output :

when mouse out of rectangle
when mouse on the rectangle
Previous Home Next