속성 event.pageY
속성 event.pageY는 마우스 커서의 Y축 좌표를 포함합니다.
좌표를 결정하는 속성으로는
event.clientX,
event.clientY,
event.pageX도 있습니다.
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.pageY;
예제
페이지 위에서 마우스를 움직일 때마다 브라우저 창을 기준으로 한
좌표(pageX와 pageY)를 출력해 보겠습니다:
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
