# event.pageX property

The property `event.pageX` contains the coordinates of the mouse cursor along the X axis. To determine the coordinates, there are also `event.clientX`, `event.clientY`, `event.pageY` properties. Let's see the difference between `clientX`/`clientY` and `pageX/pageY`.

How `clientX` and `clientY` work: if you have a `1000` by `1000` pixels window and the mouse is in the center, then `clientX` and `clientY` will both be equal to `500`. If you then scroll the page horizontally or vertically without moving the cursor, the values `clientX` and `clientY` will not change because they are relative to the window, not the document.

How `pageX` and `pageY` work: if you have a `1000` by `1000` pixels window and the cursor is in the center, then `pageX` and `pageY` will be equal to `500`. If you then scroll the page `250` pixels down, then `pageY` becomes `750`. Thus `pageX` and `pageY` contain the coordinates of the event, taking scrolling into account.

## Syntax

`event.pageX;`

## Example

When moving the mouse on the page, we will display its coordinates relative to the browser window (`pageX` and `pageY`):

`<div id="elem">0 : 0</div>` `let elem = document.getElementById('elem'); document.addEventListener('mousemove', function(event) { elem.innerHTML = event.pageX + ' : ' + event.pageY; });`

:

## See also

- the `clientY` property
  that determines the mouse coordinates along the Y axis
- the `clientX` property
  that determines the mouse coordinates along the X axis
- the `pageY` property
  that determines the mouse coordinates along the Y axis

← →
↑
en ru