e.clientX

브라우저창의 크기를 기준으로 X,Y 좌표를 얻을 수 있다.

html

 <p class="showCoord"></p>

JS

const SHOW = document.querySelector(".showCoord");

function handleMouse(e){
    SHOW.innerText = `X: ${e.clientX}, Y: ${e.clientY} `;
}

function init(){
    window.addEventListener("mousemove",handleMouse);
}
init();

e.screenX

브라우저창의 크기와 상관없는 X,Y 좌표를 얻을 수 있다.

html

 <p class="showCoord"></p>

JS

const SHOW = document.querySelector(".showCoord");

function handleMouse(e){
    SHOW.innerText = `X: ${e.screenX}, Y: ${e.screenY} `;
}

function init(){
    window.addEventListener("mousemove",handleMouse);
}
init();

비교해 보기

X값을 비교해 보면 마우스를 왼쪽 가장자리에 두었을때, clientX 는 브라우저의 위치 크기에 상관없이 0 이다.
반면, screenX는 브라우저의 위치와 크기 상관없이 화면 전체 window에서의 좌표를 보여준다.