마우스 포인터 좌표, 마우스 위치 값 확인

1. MouseEvent.clientX, clientY
화면에 표시되는 창 기준 마우스 포인터 위치.
클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역.
clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있다.
clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있다.
client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산한다.

2. MouseEvent.offsetX, offsetY
이벤트가 발생한 요소 기준 마우스 포인터 위치,
이벤트가 발생한 target(DOM Element)이 기준이 된다.
offsetX : 이벤트가 발생한 target (DOM Element)  내에서 마우스의 X좌표 위치를 담고 있다.
offsetY : 이벤트가 발생한 target (DOM Element)  내에서 마우스의 Y좌표 위치를 담고 있다.
이벤트가 발생한 대상을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 대상의 좌측 상단의 모서리 위치를 (0, 0)으로 계산한다.
 
3. MouseEvent.pageX, pageY
웹 문서 전체 기준 마우스 포인터 위치.
스크롤로 인해서 보이지 않게된 화면의 영역까지 포함해서 측정한다는 점이 앞의 두 프로퍼티와의 차이점이다.
pageX : 전체 문서 내에서 마우스의 X좌표 위치를 담고 있다.
pageY : 전체 문서 내에서 마우스의 Y좌표 위치를 담고 있다.
자칫 client 값과 혼동하기 쉬우니 잘 구분해 두자.

 

4. MouseEvent.screenX, screenY
마우스 포인터의 모니터 화면 영역에서의 위치