[Edit]

JavaScript - onmousemove event example

1 contributors

2 contributions

0 discussions

0 points

Created by:

Gaia-Kirby

720

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

Quick solution:

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

or:

xxxxxxxxxx
 
<div onmousemove="handleMousemove()"> div body here... </div>

or:

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

Practical examples

Edit

There are three common ways how to use onmousemove 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 onmousemove event on div element via event listener mechanism.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <style>
      #my-div {
        width: 200px;
        height: 100px;
        border: 1px solid #28a745;
        background: #b5edc24a;
      }
    </style>
  </head>
  <body>
    <p>Mouse over the rectangle to get the coordinates of your mouse pointer.</p>
    <div id="my-div"></div>
    <p id="coordinates"></p>
​
    <script>
      var myDiv = document.querySelector('#my-div');
      var myDivCoordinates = document.querySelector('#coordinates');
​
      myDiv.addEventListener('mousemove', getCoordinates); // add mousemove event
      myDiv.addEventListener('mouseleave', clearCoordinates); // add mouseleave event
​
      function getCoordinates(event) {
        var x = event.clientX;
        var y = event.clientY;
        var coordinates = 'x = ' + x + ', y = ' + y;
        myDivCoordinates.innerHTML = coordinates;
      }
​
      function clearCoordinates() {
        myDivCoordinates.innerHTML = "";
      }
    </script>
  </body>
</html>

Auto running

2. Attribute based example

Edit

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <style>
      #my-div {
        width: 200px;
        height: 100px;
        border: 1px solid #28a745;
        background: #b5edc24a;
      }
    </style>
  </head>
  <body>
    <p>Mouse over the rectangle to get the coordinates of your mouse pointer.</p>
    <div id="my-div" onmousemove="getCoordinates(event)" onmouseout="clearCoordinates()"></div>
    <p id="coordinates"></p>
​
    <script>
      var myDivCoordinates = document.querySelector('#coordinates');
      
      function getCoordinates(event) {
        var x = event.clientX;
        var y = event.clientY;
        var coordinates = 'x = ' + x + ', y = ' + y;
        myDivCoordinates.innerHTML = coordinates;
      }
​
      function clearCoordinates() {
        myDivCoordinates.innerHTML = "";
      }
    </script>
  </body>
</html>

Auto running

3. Property based example

Edit

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <style>
      #my-div {
        width: 200px;
        height: 100px;
        border: 1px solid #28a745;
        background: #b5edc24a;
      }
    </style>
  </head>
  <body>
    <p>Mouse over the rectangle to get the coordinates of your mouse pointer.</p>
    <div id="my-div"></div>
    <p id="coordinates"></p>
​
    <script>
      var myDiv = document.querySelector('#my-div');
      var myDivCoordinates = document.querySelector('#coordinates');
​
      myDiv.onmousemove = function(event) {
        var x = event.clientX;
        var y = event.clientY;
        var coordinates = 'x = ' + x + ', y = ' + y;
        myDivCoordinates.innerHTML = coordinates;
      }
​
       myDiv.onmouseleave = function() {
        myDivCoordinates.innerHTML = "";
      }
    </script>
  </body>
</html>