In this tutorial, we will learn the difference between mouseover, mouseenter and mousemove events in JavaScript.
Events in JavaScript provide a dynamic interface to the webpage. There are wide variety of events such as user clicking, moving the mouse over an element, etc. Events that occur when the mouse interacts with the HTML document falls under the category of MouseEvent property.
- mouseover: The onmouseover event triggers when the mouse pointer enters an element or any one of its child elements.
<element onmouseover=”myfunction()”>
- mouseenter: The onmouseenter event is triggered only when the mouse pointer hits the element.
<element onmouseenter=”myfunction()”>
- mousemove: The onmousemove event is triggered each time the mouse pointer is moved when it is over an element.
<element onmousemove=”myfunction()”>
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Difference between mouseover,
mouseenter and mousemove events
</title>
<style>
body {
text-align: center;
}
h1 {
color: orange;
}
div {
margin: 10px 50px 0px 50px;
border: 0px solid black;
padding: 10px;
text-align: center;
background-color: orange;
}
p {
color: white;
}
h3 {
background-color: white;
border-radius: 0px;
}
</style>
<script>
function over(e) {
document.getElementById("sover").innerHTML++;
}
function enter(e) {
document.getElementById("senter").innerHTML++;
}
function move(e) {
document.getElementById("smove").innerHTML++;
}
</script>
</head>
<body>
<h4>Difference between mouseover, mouseenter and mousemove events.</h4>
<div class="over" onmouseover="over(this)">
<h3>Mouseover event triggered:
<span id="sover">0</span>
times
</h3>
<p>
This event occurs every time when the mouse pointer
enters the div element or its child elements
(here <h3> or <p>).
</p>
</div>
<div class="enter" onmouseenter="enter(this)">
<h3>Mouseenter event triggered:
<span id="senter">0</span>
times
</h3>
<p>
This event occurs only when the mouse pointer enters
the div element.
</p>
</div>
<div class="move" onmousemove="move(this)">
<h3>Mousemove event triggered:
<span id="smove">0</span>
times
</h3>
<p>
This event occurs every time the mouse pointer is
moved over the div element.
</p>
</div>
</body>
</html>
Output:
