What is the difference between screenX/Y, clientX/Y and pageX/Y?

Question

What is the difference between screenX/Y, clientX/Y and pageX/Y?

Also for iPad Safari,

Answer 1

Here's a picture explaining the difference between pageY and clientY.

Same for pageX and clientX, respectively.

---

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),

while clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.

See Demo

You'll probably never need screenX/Y