[Edit]

JavaScript - onmouseleave event example

1 contributors

2 contributions

0 discussions

0 points

Created by:

Sujay

512

In this article, we would like to show you onmouseleave event example in JavaScript.

Quick solution:

xxxxxxxxxx
 
var myElement = document.querySelector('#my-element');
​
myElement.addEventListener('mouseleave', function() {
    console.log('onmouseleave event occurred.');
});

or:

xxxxxxxxxx
 
<div onmouseleave="handleMouseleave()"> div body here... </div>

or:

xxxxxxxxxx
 
var myElement = document.querySelector('#my-element');
​
myElement.onmouseleave= function() {
    console.log('onmouseleave event occurred.');
};

Note:

The onmouseleave is often used with onmouseenter event. Check examples below to see how they work.

Practical examples

Edit

There are three common ways how to use onmouseleave event:

with event listener,
with element attribute,
with element property.

1. Event listener based example

Edit

In this section, we want to show how to use onmouseleave event on div element via event listener mechanism.

xxxxxxxxxx
 
<!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>

Auto running

2. Attribute based example

Edit

In this section, we want to show how to use onmouseleave event on div element via attribute.

xxxxxxxxxx
 
<!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>

Auto running

3. Property based example

Edit

In this section, we want to show how to use onmouseleave event on input element via property.

xxxxxxxxxx
 
<!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>