(JavaScript) MouseEvent 위치값 비교

1. offsetX / offsetY : 해당 객체 안에서의 위치값

 : 해당되는 '객체' 안에서의 좌표값을 나타낸다.

  어떤 div가 있고, 마우스이벤트가 이 div에서 발생된것이라면그 div 안에서의 좌표를 나타낸다.

 

표시된 범위(초록색 테두리) 안에서 이벤트가 발생했다면, 해당 범위 안에서의 좌표가 offsetX/Y값이다.

2. screenX / screenY : 모니터 기준의 위치값

 : 현재 사용자의 '모니터' 기준으로 표시되는 좌표값이다.

  그래서 브라우저를 닫거나 열거나, 브라우저를 줄이거나 늘리거나 해도 상관없이 모니터 기준의 좌표값을 나타낸다.

검은색 테두리가 브라우저, 빨간색 테두리가 모니터. screenX/Y는 모니터 기준의 좌표이다. 즉, 검은색테두리 바깥까지 범위가 포함된다.

3. clientX / clientY : 브라우저 기준의 위치값

 : 현재 사용자의 '브라우저' 기준으로 표시되는 좌표값이다.

  현재 마우스가 브라우저의 어느 위치에 존재하는가를 나타낸다.

clientX/Y는 브라우저 기준의 좌표이다. 즉, 검은색테두리까지가 범위이다.(빨간색테두리는 사용자 모니터)

4. page X / page Y : 문서 기준의 위치값

 : 현재 보고 있는 '문서' 기준으로 표시되는 좌표값이다.

  문서의 어느 위치에 마우스가 있는지 표시해주는 값이라고 보면 되겠다.

  밑의 두 사진에서 검은색 테두리가 브라우저라고 했을 때 테니스공의 위치값은 동일하다.

  문서자체(여기선 전체사진)를 기준으로 하기 때문이다.