clientX, clientY
클라이언트 영역 내의 가로, 세로 좌표를 제공한다. 클라이언트 영역이란 현재 보이는 브라우저 화면이 기준이 되는 것이다. 현재 브라우저 화면 상에서 어느 지점에 위치하는지를 의미하기 때문에 스크롤 해도 값은 변하지 않는다.
- clientX : 브라우저 페이지에서의 X좌표 위치를 반환, 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정한다.
- clientY : 브라우저 페이지에서의 Y좌표 위치를 반환, 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정한다.
offsetX, offsetY
이는 이벤트 대상이 기준이 된다. 즉, 이벤트가 걸려 있는 DOM객체를 기준으로 좌표를 출력한다.
예를 들면, 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이 된다.
- offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환
- offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환
pageX, pageY
전체 문서를 기준으로 x, y 좌표를 반환한다. 스크롤 화면을 포함해서 측정한다. client와 비슷하지만 문서 전체 크기가 기준이어서 스크롤 할 때 값이 바뀐다.
- pageX : 브라우저 페이지에서 x좌표 위치를 반환
- pageY : 브라우저 페이지에서 y좌표 위치를 반환
screenX, screenY
모니터 화면을 기준으로 좌표를 제공한다. 브라우저 화면이 아니라 자신의 모니터 화면 전체를 기준으로 측정한다. 그래서 브라우저를 움직여도 값은 같다.
- screenX : 전체 모니터 스크린에서의 x좌표 위치를 반환한다.
- screenY : 전체 모니터 스크린에서의 y좌표 위치를 반환한다.