EN
JavaScript - onmouseleave event example
0
points
In this article, we would like to show you onmouseleave event example in JavaScript.
Quick solution:
var myElement = document.querySelector('#my-element');
myElement.addEventListener('mouseleave', function() {
console.log('onmouseleave event occurred.');
});
or:
<div onmouseleave="handleMouseleave()"> div body here... </div>
or:
var myElement = document.querySelector('#my-element');
myElement.onmouseleave= function() {
console.log('onmouseleave event occurred.');
};
Note:
The
onmouseleaveis often used withonmouseenterevent. Check examples below to see how they work.
Practical examples
There are three common ways how to use onmouseleave event:
- with event listener,
- with element attribute,
- with element property.
1. Event listener based example
In this section, we want to show how to use onmouseleave event on div element via event listener mechanism.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1s;
}
</style>
</head>
<body>
<p>Move mouse pointer onto the square:</p>
<div id="square"/>
<script>
var mySquare = document.querySelector('#square'); // find element by id
mySquare.addEventListener("mouseenter", handleMouseEnter); // add mouseenter event
function handleMouseEnter(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
}
mySquare.addEventListener("mouseleave", handleMouseLeave); // add mouseleave event
function handleMouseLeave(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
}
</script>
</body>
</html>
2. Attribute based example
In this section, we want to show how to use onmouseleave event on div element via attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1s;
}
</style>
</head>
<body>
<p>Move mouse pointer onto the square:</p>
<div id="square" onmouseenter="handleMouseEnter()" onmouseleave="handleMouseLeave()"/>
<script>
var mySquare = document.querySelector('#square');
function handleMouseEnter(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
}
function handleMouseLeave(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
}
</script>
</body>
</html>
3. Property based example
In this section, we want to show how to use onmouseleave event on input element via property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1s;
}
</style>
</head>
<body>
<p>Move mouse pointer onto the square:</p>
<div id="square"/>
<script>
var mySquare = document.querySelector('#square');
mySquare.onmouseenter = function(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
}
mySquare.onmouseleave = function(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
}
</script>
</body>
</html>