The onmouse event is used to define the operation using mouse.
onmouse events in JavaScript are:
- onmouseover and onmouseout
- onmouseup and onmousedown
- onmouseenter and onmouseleave
onmouseover and onmouseout:
onmouseover and onmouseout events occur when the mouse cursor is placed over specific element
These events do not require mouse click to happen
<html>
<head>
<script type=
"text/javascript"
>
function
over()
{
document.getElementById(
'key'
).innerHTML=
"Onmouseover event has occured"
;
}
function
out()
{
document.getElementById(
'key'
).innerHTML=
"Onmouseout event has occured"
;
}
</script>
</head>
<body bgcolor=
"cyan"
>
<h2 id=
"key"
onmouseover=
"over()"
onmouseout=
"out()"
>
Original Text</h2>
</body>
</html>
Output:
On loading webpage:
After placing mouse on element:
After removing mouse from the element:
onmouseup and onmousedown:
These events occur when a mouse click is encountered
<html>
<head>
<script type=
"text/javascript"
>
function
up()
{
document.getElementById(
"img"
).src=
"up.png"
;
}
function
down()
{
document.getElementById(
"img"
).src =
"down.png"
;
}
</script>
</head>
<body bgcolor=
'yellow'
>
<img id=
"img"
src=
"img.png"
onmouseup=
"up()"
onmousedown=
"down()"
width=500px>
</body>
</html>
Output:
On loading web page:
Occurence of onmousedown event:
Occurence of onmouseup event:
onmouseenter and onmouseleave
onmouseenter event occurs when the mouse is placed on the element and stays until the mouse is removed from the element
onmouseleave event occurs as soon as the mouse is removed from the element
These event do not require mouse click to happen
<html>
<head>
<script type=
"text/javascript"
>
function
enter()
{
document.getElementById(
"img"
).src=
"enter.png"
;
}
function
leave()
{
document.getElementById(
"img"
).src =
"leave.png"
;
}
</script>
</head>
<body bgcolor=
'yellow'
>
<img id=
"img"
src=
"img.png"
onmouseenter=
"enter()"
onmouseleave=
"leave()"
width=500px>
</body>
</html>
Output:
On loading web page:
Occurence of onmouseenter event:
Occurence of onmouseleave event: