마우스 이벤트가 발생했을 때 screenY 속성은 마우스 포인터의 세로(Y) 좌표를 반환합니다. 여기서 좌표는 브라우저 창이나 문서가 아닌, 모니터 화면 전체를 기준으로 계산된다는 점이 핵심입니다.
screenY의 특징
screenY는 사용자의 물리적 화면을 기준으로 하기 때문에, 브라우저 창을 화면 내에서 이동시키면 같은 위치를 클릭해도 반환되는 값이 달라질 수 있습니다. 비슷한 속성들과의 차이는 다음과 같습니다.
- screenX / screenY: 모니터 화면 기준 좌표
- clientX / clientY: 브라우저 뷰포트(화면에 보이는 영역) 기준 좌표
- pageX / pageY: 문서 전체(스크롤 포함) 기준 좌표
사용 예제
아래 코드를 실행하고 텍스트를 클릭하면, 마우스 포인터의 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>정리
screenY는 이벤트 객체(event)에서 제공하는 읽기 전용 속성으로, 드래그 앤 드롭 구현, 멀티 모니터 환경에서의 위치 추적 등 화면 기준 좌표가 필요한 경우에 유용하게 활용됩니다. 반대로 요소 내부의 상대적인 위치가 필요하다면 clientY나 offsetY를 사용하는 것이 더 적합합니다.