EVENTS - mousemove()

The mousemove() event occurs whenever the mouse pointer moves.

In simple words, whenever you move the mouse pointer inside the HTML page mousemove() event gets triggered.

And event.pageX and event.pageY is used to capture the position of the mouse pointer.

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
   	
        <p> Mouse pointer for X: and Y:</p>

      	<script>
      
			$( document ).mousemove(function(event){
  				$("p").text("Mouse pointer for X: "+event.pageX+" and Y: "+event.pageY);
			});
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there is a <p> element,

<p> Mouse pointer for X: and Y: </p>

Now, if we see the JQuery statement,

$( document ).mousemove(function(event){
	$("p").text("Mouse pointer for X: "+event.pageX+" and Y: "+event.pageY);
});

We are dealing with the document. In other words, we are going to find the mouse pointer with respect to the document.

So the selector is the document itself.

Then we call the mousemove() event.

$( document ).mousemove(...);

And the anonymous function inside the mousemove() event,

function(event){
	$("p").text("Mouse pointer for X: "+event.pageX+" and Y: "+event.pageY);
}

Is used to display the mouse pointer with respect to X and Y i.e. Left and Top.

$("p").text("Mouse pointer for X: "+event.pageX+" and Y: "+event.pageY);

❮❮ PREV NEXT ❯❯