JavaScript is a well-known versatile programming language that offers a wide range of methods and properties to interact with HTML elements. Each of its built-in methods and properties performs a specific task depending on its name and defined functionality. The user can easily interact with the HTML element as well as its child(if exists) attribute and values with the help of these methods and properties.

This guide demonstrates the pageX Mouse Event property in JavaScript.

What is the “pageX” Mouse Event Property in JavaScript?

The “pageX” mouse event is a built-in JavaScript property that retrieves the horizontal coordinates of the mouse cursor/pointer relative to the document. It performs this task when the specified event triggers.

Syntax

The above syntax does not accept any additional argument or parameter.

Let’s use the above-defined property practically.

Example 1: Applying “pageX” Mouse Event Property in JavaScript

This example applies the “pageX” mouse event property to get the mouse pointer’s horizontal coordinates.

HTML Code

In the above lines of code:

• The “<button>” tag creates a new button with an attached mouse “onclick” event to invoke the functionality of the “jsFunc()” when the event is triggered.
• The “<p>” tag inserts an empty paragraph with the id “sample”.

JavaScript Code

The above code snippet:

• Define a function named “jsFunc()” having the event as its argument.
• In the function definition, the “x_coord” variable utilizes the “event.pageX” property to get the horizontal coordinates of the mouse point when its linked event is fired.
• Next, it applies the “getElementById()” method to access the added empty paragraph through its id “sample” and append it to the “x_coord” variable value.

Output

The output shows the mouse pointer’s horizontal coordinates upon clicking on the given button.

Example 2: Applying the “pageX” Mouse Event With the “pageY” Event in JavaScript

The “event.pageX” property can also be utilized with the “event.pageY” property to get both horizontal and vertical coordinates of the mouse pointer. Let’s see it practically.

HTML Code

In this scenario, the content of the “<button>” element is modified.

JavaScript Code

This time, the “event.pageY” property is applied to return the mouse pointer’s vertical coordinates upon triggering the associated event.

Output

It can be seen that upon clicking the given button both horizontal and vertical coordinates of the mouse pointer display on the current DOM.

Conclusion

In JavaScript, the “pageX” mouse event property helps to get the horizontal coordinates of the mouse cursor/pointer when its associated event fires. This property is applicable for all JavaScript events such as ondblclick, onmouseover, onkeyup, onkeydown, and many others. The user can also use this property with the “pageY” property to return the vertical coordinates of the mouse pointer. This guide briefly demonstrated the pageX Mouse Event in JavaScript.