Languages
[Edit]
EN

JavaScript - onmousemove event example

0 points
Created by:
Dirask Community
6300

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

Quick solution:

var myElement = document.querySelector('#element-id');

myElement.addEventListener('mousemove', function() {
    console.log('onmousemove event occurred.');
});

or:

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

or:

var myElement = document.querySelector('#element-id');

myElement.onmousemove = function() {
    console.log('onmousemove event occurred.');
};

 

Practical examples

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

// ONLINE-RUNNER:browser;

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

2. Attribute based example

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

// ONLINE-RUNNER:browser;

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

3. Property based example

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

// ONLINE-RUNNER:browser;

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

Related posts

JavaScript - events

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join