# Свойство event.pageX

Свойство `event.pageX` содержит в себе координаты курсора мыши по оси X. Для определения координат есть также свойства `event.clientX`, `event.clientY`, `event.pageY`. Давайте посмотрим разницу между `clientX`/`clientY` и `pageX/pageY`.

Как работают `clientX` и `clientY`: если у вас есть окно `1000` на `1000` пикселей, и мышь находится в центре, то `clientX` и `clientY` будут оба равны `500`. Если вы затем прокрутите страницу по горизонтали или вертикали, не двигая курсор, то значения `clientX` и `clientY` не изменятся, так как отсчитываются относительно окна, а не документа.

Как работают `pageX` и `pageY`: если у вас есть окно `1000` на `1000` пикселей, и курсор находится в центре, то `pageX` и `pageY` будут равны `500`. Если вы затем прокрутите страницу на `250` пикселей вниз, то `pageY` станет равным `750`. Таким образом `pageX` и `pageY` содержат координаты события с учетом прокрутки.

## Синтаксис

`event.pageX;`

## Пример

При движении мыши по странице будем выводить ее координаты относительно окна браузера (`pageX` и `pageY`):

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

:

## Смотрите также

- свойство `clientY`,
  которое определяет координаты мыши по оси Y
- свойство `clientX`,
  которое определяет координаты мыши по оси X
- свойство `pageY`,
  которое определяет координаты мыши по оси Y

← →
↑
en ru