HTML DOM의 MouseEvent offsetY 속성은 마우스 이벤트가 발생했을 때, 마우스 포인터의 세로(Y) 좌표를 대상(target) 요소를 기준으로 반환합니다. 여기에 offsetX 속성을 함께 사용하면 가로(X) 좌표까지 함께 얻을 수 있어 마우스 위치 추적에 매우 유용합니다.
offsetY 속성 문법
offsetY 속성은 MouseEvent 객체의 참조를 반환하며, 기본 문법은 다음과 같습니다.
MouseEventObject.offsetY
반환되는 값은 대상 요소의 안쪽 상단 경계(padding-box 기준)로부터 마우스 포인터까지의 픽셀 거리입니다.
MouseEvent offsetY 예제 코드
아래 예제는 offsetY와 offsetX 속성을 활용해 간단한 미니 게임을 구현한 것입니다. 초록색 '안전 구역' 안에서 마우스를 움직여 특정 지점에 도달하면 성공하고, 빨간색 '위험 구역'에 진입하면 실패하는 방식입니다.
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetY</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-offsetY</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.offsetX;
var y = event.offsetY;
if(y > 45 && y < 60){
divDisplay.textContent = 'Keep Going!';
if(x === 272){
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' 버튼을 클릭하면 gameStart() 함수가 실행되어 초록색 영역(#outer)에 mousemove 이벤트 리스너가 등록됩니다.
2. 좌표 판별: 마우스가 움직일 때마다 playGame() 함수가 호출되며, event.offsetY 값이 45보다 크고 60보다 작은 경우(중간 안전 띠)에는 "Keep Going!" 메시지가 표시됩니다.
3. 성공 조건: Y좌표가 안전 범위 내에 있으면서 X좌표가 정확히 272픽셀에 도달하면 "Congrats! You Did it!" 메시지와 함께 게임이 종료됩니다.
4. 실패 조건: 위험(빨간색) 영역에 마우스가 진입하면 실패 메시지가 출력되고 이벤트 리스너가 제거되어 게임이 끝납니다.
실행 결과
'Start' 버튼을 클릭한 후 커서가 초록색(안전) 영역 안에 있는 경우 −
'Start' 버튼을 클릭한 후 커서가 초록색(안전) 영역 끝 지점에 도달한 경우 −
'Start' 버튼을 클릭한 후 커서가 빨간색(위험) 영역에 있는 경우 −
offsetY 사용 시 주의사항
offsetY 속성은 대상 요소를 기준으로 한 상대 좌표를 반환하기 때문에, 이벤트가 하위 자식 요소에서 발생하면 그 자식 요소를 기준으로 좌표가 계산된다는 점에 유의해야 합니다. 페이지 전체 기준의 좌표가 필요하다면 pageY, 화면 기준이라면 screenY 속성을 사용하는 것이 적합합니다.