JavaScript mousemove Event | Execute on moving mouse pointer

The JavaScript mousemove event executes when the mouse pointer moves over an element. With onmousemove event, we can execute our JavaScript code on moving the mouse pointer.

Every time, we move our mouse, the event will be executed. The onmousemove event is going to be interesting.

In this article, we are going to see the example of the mousemove event.

Syntax and example of JavaScript mousemove event

We can use the mousemove event in three different ways. Below is the given syntax with example of using the onmousemove event in three ways to find the mouse pointer position by the X and Y axis while we move our mouse:

mousemove event with HTML onmousemove HTML attribute

The syntax of using mousemove event by calling it in HTML attribute is:

<element onmousemove="event_function">

Here we have to create our function that we have passed in the above attribute.

Below is an example of using the event in HTML attribute:

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 350px;
  height: 350px;
  border: 1px solid #777;
}
</style>
</head>
<body>

<div id="container" onmousemove="event_function(event)"></div>
<span id="show_position"></span>

<script>
function event_function(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coo = "X and Y position: " + x + "," + y;
  document.getElementById("show_position").innerHTML = coo;
}
</script>

</body>
</html>

 

In JavaScript by taking the element and binding function

Below is the syntax of this process:

object.onmousemove = function(){event_function};

Below is the example mousemove event in JavaScript:

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 450px;
  height: 320px;
  border: 1px solid #777777;
}
</style>
</head>
<body>

<div id="container"></div>
<span id="position"></span>

<script>
document.getElementById("container").onmousemove = function(event) {get_position(event)};

function get_position(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coord = "X and Y position: (" + x + "," + y + ")";
  document.getElementById("position").innerHTML = coord;
}
</script>

</body>
</html>

 

onmousemove event using the addEventListener() method

In the example below, we have used the addEventListener() method to perform JavaScripe mousemove event:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 550px;
  height: 330px;
  border: 1px solid #777777;
}
</style>
</head>
<body>

<div id="container"></div>
<span id="position"></span>

<script>
document.getElementById("container").addEventListener("mousemove", function(event) {
  
  var x = event.clientX;
  var y = event.clientY;
  var coo = "X and Y axis: " + x + "," + y;
  document.getElementById("position").innerHTML = coo;

});

</script>

</body>
</html>

Also, read:

So here in this article, we have learned about the onmousemove event and see it’s usage.

Leave a Reply

Your email address will not be published. Required fields are marked *