마우스 이벤트가 발생했을 때 screenX 속성은 마우스 포인터의 수평(X) 좌표를 반환합니다. 이때 좌표의 기준은 웹페이지나 브라우저 창이 아니라, 사용자의 물리적 화면(모니터) 전체라는 점이 핵심입니다.
screenX와 함께 알아두면 좋은 좌표 속성
자바스크립트 마우스 이벤트에는 위치를 확인할 수 있는 여러 속성이 있으며, 각각 기준점이 다릅니다.
- screenX / screenY: 화면(모니터) 전체를 기준으로 한 마우스 포인터의 X, Y 좌표
- clientX / clientY: 브라우저 뷰포트(보이는 영역)를 기준으로 한 좌표
- pageX / pageY: 문서 전체(스크롤 포함)를 기준으로 한 좌표
따라서 듀얼 모니터 환경에서는 다른 모니터로 마우스를 이동하면 screenX 값이 음수가 되거나 주 모니터 너비를 초과하는 값이 될 수 있습니다.
screenX 마우스 이벤트 예제 코드
아래 예제는 요소를 클릭했을 때 screenX와 screenY 속성을 이용해 마우스 포인터의 수평(X) 및 수직(Y) 좌표를 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<p onclick = "coordsFunc(event)">여기를 클릭하면 마우스 포인터의 X(수평), Y(수직) 좌표를 확인할 수 있습니다.</p>
<script>
function coordsFunc(event) {
var x_coord = event.screenX;
var y_coord = event.screenY;
var xycoords = "X 좌표: " + x_coord + ", Y 좌표: " + y_coord;
document.write(xycoords);
}
</script>
</body>
</html>코드 설명
<p> 태그에 onclick 이벤트 핸들러가 등록되어 있어, 문단을 클릭하면 coordsFunc(event) 함수가 호출됩니다. 함수 내부에서는 이벤트 객체의 event.screenX와 event.screenY 값을 각각 변수에 저장한 뒤, 문자열로 조합하여 document.write()로 출력합니다.
실제 프로젝트에서는 document.write() 대신 innerHTML이나 textContent를 사용해 특정 요소에 결과를 표시하는 것이 권장됩니다.