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