# event.clientY property

The `event.clientY` property contains the coordinates of the mouse cursor along the Y axis. To determine the coordinates, there are also `event.clientX`, `event.pageX`, `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 into account scrolling.

## Syntax

`event.clientY;`

## Example

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

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

:

## See also

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

← →
↑
en ru