자바스크립트 마우스 좌표 얻기

- 마우스를 클릭했을때 좌표 얻는 방법

screenX, screenY

모니터의 화면을 기준으로 좌표 표시.
왼쪽 상단의 모서리 좌표가 (0,0)

pageX, pageY

전제 문서를 기준으로 좌표 표시.
문서의 왼쪽 모서리 좌표가 (0,0)
스크롤시 보이는 마우스 포인터의 위치는 같아도 좌표는 스크롤 만큼 늘어날수 있음.

clientX, clientY

브라우저에서 웹페이지가 보여지는 영역을 기준으로 좌표 표시.
주소바 아래 웹페이지가 보여지는 영역의 왼쪽 상단 모서리 좌표가 (0,0)
-전체화면으로 띄어 놓았을때 screenY와 clientY의 좌표 차이는 screenY-(메뉴+주소바의 높이)

offsetX, offsetY

이벤트가 바인딩된 DOM Node를 기준으로 좌표 표시.
<div>
     <img>
</div>

img를 클릭했을 경우.
img의 상단 왼쪽 모서리 좌표가 (0,0)