❮❮ PREV NEXT ❯❯

EVENTS - event.pageX

The event.pageX is used to return the position of the mouse pointer with respect to the left side of the document. It is used with the mousemove() event.

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: </p>

      	<script>
      
			$( document ).mousemove(function(event){
  				$("p").text("Mouse pointer for X: "+event.pageX);
			});
            
      	</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: </p>

Now, if we see the JQuery statement,

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

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);
}

Is used to display the mouse pointer with respect to the left side of the document.

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

The event.pageX displays the value of the mouse pointer.

Now, in the output screen, if you move the mouse pointer to the left side of the screen, you would see the value of mouse pointer(Represented by event.pageX) reduces.

And if you take the mouse pointer to the right side of the output screen,you would see the value of mouse pointer(Represented by event.pageX) increases.

❮❮ PREV NEXT ❯❯