event Target object 의 좌표 속성

좌표의 범위

screen > page > client > layer = offset

🎄layer / offset

layerX: 39 layerY: 19
= offsetX : 39, offsetY : 19
이벤트가 발생한 DOM 객체가 기준이된다.
타겟 요소의 박스를 기준으로 마우스 포인터까지의 좌표값

( 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이됩니다. 화면의 기준이 아닙니다)

전체 문서를 기준으로 합니다(스크롤 화면 포함)
만약 화면 중간에 어떤 div 가 클릭된다면 그 div 의 왼쪽 상단 모서리가 0 이 된다

🎁client

clientX: 262 clientY: 157
현재 보이는 브라우저 화면이 기준이된다.
(스크롤을 무시하고)지금 보이는 화면의 상단을 0 으로 잡는다.

🎨page

pageX: 262 pageY: 157
사용자의 모니터 화면을 기준으로 좌표를 잡는다.
브라우저 화면이 아니라 자신의 모니터 화면 전체가 기준이라서 브라우저 창을 이동시켜도 값은 변하지않는다.

🎀screen

screenX: 828 screenY: 295
사용자의 모니터 화면을 기준으로 좌표를 제공
브라우저 화면이 아니라 자신의 모니터 화면 전체가 기준이라서 브라우저 창을 이동시켜도 값은 변하지않는다.

x: 262 y: 157