HTML onmousemove 이벤트 속성은 사용자의 마우스 포인터가 HTML 문서 내 특정 요소 위에서 움직이는 동안 지정된 자바스크립트 코드를 실행하는 이벤트 핸들러입니다.
onmousemove 이벤트 속성이란?
onmousemove는 마우스 포인터가 요소 위에 머무는 동안 포인터가 조금이라도 움직일 때마다 반복적으로 발생합니다. 이는 요소에 진입할 때 한 번만 실행되는 onmouseenter나 onmouseover와는 차이가 있습니다. 따라서 마우스 움직임에 실시간으로 반응하는 인터랙티브한 UI를 구현할 때 매우 유용하게 활용됩니다.
문법(Syntax)
onmousemove 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onmousemove="script"></tagname>
예제(Example)
다음은 빨간 원 위에서 마우스 커서를 움직이면 원의 배경색이 파란색으로 변경되고, 커서가 원을 벗어나면 초록색으로 바뀌는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.circle {
background: #db133a;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px auto;
}
p {
margin: 30px auto;
}
</style>
</head>
<body>
<h1>HTML onmousemove Event Attribute Demo</h1>
<div class="circle" onmousemove="mouseMoveFn()" onmouseout="mouseOutFn()"></div>
<p>Try to move the cursor over the red circle</p>
<script>
function mouseMoveFn() {
document.querySelector('.circle').style.background = '#2274A5';
}
function mouseOutFn() {
document.querySelector('.circle').style.background = '#0B6E4F';
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 브라우저에서 실행하면 페이지 중앙에 아래와 같이 빨간 원이 표시됩니다.
이제 마우스 커서를 빨간 원 위로 가져가 움직여 보세요. onmousemove 이벤트가 발생하면서 원의 배경색이 즉시 파란색(#2274A5)으로 변경되는 것을 확인할 수 있습니다.
반대로 마우스 커서가 원을 벗어나면 함께 등록된 onmouseout 이벤트가 실행되어 원의 색상이 초록색(#0B6E4F)으로 전환됩니다. 이처럼 onmousemove와 onmouseout을 조합하면 마우스 위치 변화에 따라 다양한 시각적 효과를 손쉽게 구현할 수 있습니다.
