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

In web development, screenX/Y, clientX/Y, and pageX/Y are properties of the MouseEvent object that are used to determine the position of the cursor when a mouse event occurs.

screenX/Y: The screenX/Y properties return the position of the cursor in relation to the top-left corner of the user's screen.

clientX/Y: The clientX/Y properties return the position of the cursor in relation to the top-left corner of the browser's client area (the area of the browser window that is not occupied by the browser's interface elements, such as the address bar).

pageX/Y: The pageX/Y properties return the position of the cursor in relation to the top-left corner of the entire web page, regardless of the scroll position.

For example, let's say you have a mouse event on an element inside a div with a scroll, the screenX/Y will be the same as the clientX/Y because they are related to the screen and client area of the browser, but the pageX/Y will be different because it's taking into account the entire page and the position of the element in relation to it.

It is important to note that the values returned by these properties may be affected by the user's screen resolution and zoom level.

here's an example of how you could use the screenX/Y, clientX/Y, and pageX/Y properties in a JavaScript event handler:

   

document.addEventListener("mousedown", function(event) {

        console.log("screenX: " + event.screenX);

        console.log("screenY: " + event.screenY);

        console.log("clientX: " + event.clientX);

        console.log("clientY: " + event.clientY);

        console.log("pageX: " + event.pageX);

        console.log("pageY: " + event.pageY);

    });

This code will add an event listener to the entire document and will listen to mousedown event, when the user clicks on the document, the event listener will fire and the event object will be passed, the event object contains the properties of the event like screenX, screenY, clientX, clientY, pageX, pageY and so on.

You can also use this code snippet on a specific element by replacing document.addEventListener("mousedown", function(event) with element.addEventListener("mousedown", function(event) instead.

You can use these properties to determine the position of the cursor and use it in your logic.