JavaScript onmouseover vs onmouseenter Events
You are Here:
JavaScript onmouseover vs onmouseenter Event
The onmouseover event occurs when the mouse pointer is moved onto an element or one of its child elements.
The onmouseenter event occurs when the mouse pointer is entered onto an element.
The main difference between the onmouseover event and onmouseenter event as follows
- The onmouseover event will bubble, i.e., The element with
onmouseoverevent will be affected when the mouse pointer is moved onto its child element. - The onmouseenter event will NOT bubble, i.e., The element with
onmouseenterevent will NOT be affected when the mouse pointer is entered onto its child element.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
h1+div{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: center;
}
.parentDiv{
border: 1px solid black;
width: 250px;
margin: 5px;
}
.childDiv{
border: 1px solid red;
width: 180px;
height: 50px;
margin: 10px 25px;
}
</style>
</head>
<body>
<h1>onmouseover vs onmouseenter</h1>
<div>
<div class="parentDiv" onmouseover="myMouseOver()">
Parent Div
<div class="childDiv">Child div<br>Touch me and go away</div>
<p>onmouseover - <span id="point">0</span></p>
</div>
<div class="parentDiv" onmouseenter="myMouseEnter()">
Parent Div
<div class="childDiv">Child div<br>Touch me and go away</div>
<p>onmouseenter - <span id="point1">0</span></p>
</div>
</div>
<script>
var count = 0;
var count1 = 0;
function myMouseOver(){
count += 1;
document.getElementById("point").innerText = count;
}
function myMouseEnter(){
count1 += 1;
document.getElementById("point1").innerText = count1;
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in JavaScript.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
