HTML DOM MouseEvent pageY 속성이란?
HTML DOM의 MouseEvent pageY 속성은 마우스 이벤트가 발생했을 때, 문서(document)를 기준으로 한 마우스 포인터의 세로(Y) 좌표를 반환합니다. pageX 속성과 함께 사용하면 가로(X) 좌표까지 함께 얻을 수 있어 마우스 위치를 정확하게 파악하는 데 유용합니다.
pageY 속성은 뷰포트가 아닌 문서 전체를 기준으로 좌표를 계산하기 때문에, 페이지가 스크롤된 상태에서도 스크롤 위치가 반영된 좌표값을 얻을 수 있다는 점이 특징입니다.
pageY 속성 기본 문법
pageY 속성은 MouseEvent 객체의 속성으로, 다음과 같은 형태로 참조하여 사용합니다.
MouseEventObject.pageY
반환값은 숫자(Number) 타입이며, 마우스 이벤트가 발생한 시점의 문서 기준 Y좌표를 픽셀 단위로 나타냅니다.
MouseEvent pageY 예제 코드
아래 예제는 pageY와 pageX 속성을 활용한 간단한 미니 게임입니다. 초록색 영역(안전 구역) 안에서 마우스를 이동시키고, 지정된 좌표에 도달하면 성공 메시지를 표시하며, 빨간색 영역(위험 구역)에 진입하면 실패 처리됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent pageY</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
#outer {
width:70%;
margin: 0 auto;
padding: 0;
text-align: center;
border:1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-pageY</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.pageX;
var y = event.pageY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
else{
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html>실행 결과
1. Start 버튼 클릭 후 커서가 초록색(안전) 영역에 있을 때
마우스가 안전 구역 내에 있는 동안에는 "Keep Going!" 메시지가 화면에 표시되며 계속 이동할 수 있습니다.
2. Start 버튼 클릭 후 커서가 초록색(안전) 영역 끝에 도달했을 때
마우스가 목표 좌표(pageX 값 439)에 도달하면 "Congrats! You Did it!" 성공 메시지가 출력되고, mousemove 이벤트 리스너가 제거되어 게임이 종료됩니다.
3. Start 버튼 클릭 후 커서가 빨간색(위험) 영역에 들어갔을 때
마우스가 위험 구역으로 이동하면 "You moved to DANGER area. You loose!" 실패 메시지가 표시되며 게임이 종료됩니다.
정리
MouseEvent pageY 속성은 마우스 이벤트 발생 시 문서 기준의 세로 좌표를 반환하는 읽기 전용(read-only) 속성입니다. pageX 속성과 함께 사용하면 마우스 포인터의 정확한 위치를 파악할 수 있어, 드래그 앤 드롭, 캔버스 그리기, 마우스 추적 게임 등 다양한 인터랙티브 웹 기능을 구현할 때 활용도가 매우 높습니다.