[javascript] 마우스 좌표 (screenX, clientX, pageX, offsetX)

1. screenX, screenY

 

사용자의 모니터 화면을 기준으로 한다.

왼쪽 모서리가 좌표 (0, 0)이 됨

 

 

2. clientX, clientY

 

브라우저에서 현재 웹페이지가 보여지는 영역을 기준으로 한다.

스크롤을 하더라도 마우스 좌표의 값은 바뀌지 않음

 

 

3. pageX, pageY

 

현재 페이지의 전체 영역(길이)을 기준으로 한다.

페이지 길이에 영향을 받음

 

 

 

4. offsetX, offsetY

 

좌표를 출력하도록 이벤트가 적용돼있는 영역을 기준으로 한다.

div내에서 왼쪽 모서리가 좌표 (0, 0)이 됨