JavaScript에서 마우스 이벤트가 발생하면 pageX 속성을 사용하여 마우스 포인터의 X축(가로) 좌표를 구할 수 있습니다. 이 좌표는 문서(document) 전체를 기준으로 계산되며, 페이지를 아래로 스크롤한 경우에도 스크롤된 거리가 포함된 값이 반환됩니다.
pageX 속성의 특징
pageX는 마우스 이벤트 객체(MouseEvent)가 제공하는 읽기 전용(read-only) 속성입니다. 함께 자주 사용되는 관련 속성은 다음과 같습니다.
- pageX / pageY: 문서(document) 기준의 마우스 좌표 (스크롤 포함)
- clientX / clientY: 브라우저 화면(viewport) 기준의 마우스 좌표 (스크롤 제외)
- screenX / screenY: 물리적 모니터 화면 기준의 마우스 좌표
pageX 예제 코드
아래 코드를 실행하고 텍스트를 클릭하면, 마우스 포인터의 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 coords= " + x_coord + ", Y coords= " + y_coord;
document.write(xycoords);
}
</script>
</body>
</html>코드 설명
위 예제에서는 <p> 요소에 onclick 이벤트 핸들러를 등록했습니다. 사용자가 해당 영역을 클릭하면 coordsFunc(event) 함수가 호출되고, 이벤트 객체인 event를 통해 event.pageX와 event.pageY 값이 각각 변수에 저장됩니다.
이후 문자열 연결을 통해 좌표 정보를 조합한 뒤, document.write()로 화면에 출력합니다. 실무에서는 document.write() 대신 innerHTML이나 textContent를 활용하는 것이 더 권장됩니다.
정리
pageX는 마우스 이벤트 발생 시점의 가로(X) 좌표를 문서 기준으로 반환하는 속성입니다. 드래그 앤 드롭, 커스텀 툴팁 위치 지정, 캔버스 그리기 등 마우스 위치가 필요한 다양한 인터랙션 기능을 구현할 때 유용하게 활용됩니다.