Examples with some visuals will be very helpful.

Translator’s note:

This topic has been marked on enSO as a duplicate question:
What is the difference between screenX / Y, clientX / Y and pageX / Y?

Indeed, the title is almost 100% the same, but the content of the answers is much inferior, in my opinion, to the translated answers with enSO in this topic.
They are more detailed, with good graphic illustrations, with interactive examples.
Therefore, this topic was chosen for translation. And on ruSO, similar questions were asked more than once, which indicates the interest in this issue.

_{Free translation of the question: What is the difference between pageX / Y clientX / Y screenX / Y in Javascript?
by contributor @Inquisitive}

Answer 1, authority 100%

Visual cues represent:

Screen → Full monitor screen (screenX / Y )
The position will always be relative to the physical viewport.

Client → Browser viewport client (clientX / Y )
If you click in the upper left corner, the value will always be (0,0) regardless of the `scroll position`.

Document → Full document / page (pageX / Y )
Note that the `pageX / pageY` event is the` UIEvent` object [not standardized] [1].

All values ​​are in pixels.

_{Free translation response from user [@ user1693593] (profile link).}

Answer 2, authority 86%

Iterative Example

jsBin DEMO

CLIENT → The Browser window

clientX and clientY = (px) values ​​for mouse position relative to the viewport browser screen

_{Tip:
Even if you scroll through the document, the values ​​will always be the same}

PAGE → Entire Document

pageX , pageY = values ​​in (px), the position of the mouse cursor, relative to the upper left corner of the document.

_{Tip:
If you scroll the document, for example vertically pageY the value changes because this is the new top position of the mouse cursor within your element.
It is also worth noting that:
event.pageY - event.clientY === document.documentElement.scrollTop
(or jQuery’s $ ("html, body"). scrollTop () )}

SCREEN → Your Screen

screenX and screenY are the values ​​(px ) of the current position of the mouse cursor relative to the physical display .

_{Free translation of the answer What is the difference between pageX / Y clientX / Y screenX / Y in Javascript? by member @Roko C. Buljan .}