마우스 이벤트가 발생했을 때 pageY 속성을 사용하면 마우스 포인터의 세로(Y) 좌표를 구할 수 있습니다. pageY는 문서(document) 전체를 기준으로 좌표를 반환하기 때문에, 페이지가 스크롤된 상태라도 스크롤된 거리까지 포함한 값을 얻을 수 있다는 점이 특징입니다.
pageY와 유사한 좌표 속성 비교
JavaScript에는 마우스 좌표를 구하는 여러 속성이 있으며, 각각 기준점이 다릅니다.
- pageX / pageY: 문서 전체를 기준으로 한 좌표 (스크롤 포함)
- clientX / clientY: 브라우저 화면(뷰포트)을 기준으로 한 좌표
- screenX / screenY: 사용자의 물리적인 모니터 화면을 기준으로 한 좌표
예제 코드
다음 코드를 실행하고 화면을 클릭하면, 마우스 포인터의 X(가로) 좌표와 Y(세로) 좌표를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<p onclick="coordsFunc(event)">여기를 클릭하면 마우스 포인터의 X(가로) 및 Y(세로) 좌표를 확인할 수 있습니다.</p>
<script>
function coordsFunc(event) {
var x_coord = event.pageX;
var y_coord = event.pageY;
var xycoords = "X 좌표= " + x_coord + ", Y 좌표= " + y_coord;
document.write(xycoords);
}
</script>
</body>
</html>위 예제에서는 클릭 이벤트가 발생하면 event.pageX와 event.pageY를 통해 각각 가로, 세로 좌표를 가져온 후 문자열로 조합하여 화면에 출력합니다.