event.pageX 속성
event.pageX 속성은
마우스 커서의 X축 좌표를 포함합니다.
좌표를 결정하기 위한 다른 속성으로는
event.clientX,
event.clientY,
event.pageY가 있습니다.
clientX/clientY와
pageX/pageY의 차이점을 살펴보겠습니다.
clientX와 clientY의 동작 방식:
1000 x 1000 픽셀 크기의 창이 있고,
마우스가 중앙에 위치하면 clientX와
clientY는 모두 500이 됩니다.
커서를 움직이지 않고 페이지를 수평 또는
수직으로 스크롤하면, clientX와 clientY 값은
변하지 않습니다. 이 값들은 문서가 아닌 창(뷰포트)을
기준으로 계산되기 때문입니다.
pageX와 pageY의 동작 방식:
1000 x 1000 픽셀 크기의 창이 있고,
커서가 중앙에 위치하면
pageX와 pageY는 500이 됩니다.
페이지를 250 픽셀 아래로 스크롤하면
pageY는 750이 됩니다.
따라서 pageX와 pageY는 스크롤을 고려한
이벤트 좌표를 포함합니다.
구문
event.pageX;
예제
페이지 위에서 마우스를 움직일 때
브라우저 창을 기준으로 한 마우스 좌표
(pageX와 pageY)를 출력하겠습니다:
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
