JavaScript onmouseout vs onmouseleave Events
You are Here:
JavaScript onmouseout vs onmouseleave Event
The onmouseout event occurs when the mouse pointer is moved out of an element or one of its children.
The onmouseleave event occurs when the mouse pointer is left out of an element.
The main difference between the onmouseout event and onmouseleave event as follows
- The onmouseout event will bubble, i.e., The element with
onmouseoutevent will be affected when the mouse pointer is moved out of its child element. - The onmouseleave event will NOT bubble, i.e., The element with
onmouseleaveevent will NOT be affected when the mouse pointer is left out of 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>onmouseout vs onmouseleave</h1>
<div>
<div class="parentDiv" onmouseout="myMouseOut()">
Parent Div
<div class="childDiv">Child div<br>Touch me and go away</div>
<p>onmouseout - <span id="point">0</span></p>
</div>
<div class="parentDiv" onmouseleave="myMouseLeave()">
Parent Div
<div class="childDiv">Child div<br>Touch me and go away</div>
<p>onmouseleave - <span id="point1">0</span></p>
</div>
</div>
<script>
var count = 0;
var count1 = 0;
function myMouseOut(){
count += 1;
document.getElementById("point").innerText = count;
}
function myMouseLeave(){
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.
