onmousemove 이벤트는 마우스 포인터가 요소 위에서 움직일 때마다 발생하는 JavaScript 이벤트입니다. 사용자가 마우스를 조금이라도 이동하면 해당 요소에 연결된 함수가 반복적으로 호출되기 때문에, 마우스 위치 추적, 드래그 앤 드롭 구현, 실시간 좌표 표시 등 다양한 인터랙티브 기능을 만들 때 활용됩니다.
onmousemove 이벤트의 기본 동작
onmousemove 이벤트는 HTML 요소에 직접 속성으로 지정하거나, addEventListener() 메서드를 통해 등록할 수 있습니다. 마우스가 요소 영역 안에서 움직이는 동안 이벤트가 계속해서 트리거되며, 이벤트 객체를 통해 마우스의 X, Y 좌표 정보도 함께 얻을 수 있습니다.
예제 코드
다음 코드를 실행하면 onmousemove 이벤트가 어떻게 작동하는지 직접 확인할 수 있습니다. 문단 위로 마우스를 움직이면 알림 창이 나타납니다.
<html>
<head>
<script>
<!--
function sayHello() {
alert("Mouse Move")
}
//-->
</script>
</head>
<body>
<p onmousemove = "sayHello()">마우스를 이 영역 위에서 움직여 보세요.</p>
</body>
</html>
참고 사항
onmousemove 이벤트는 마우스가 움직이는 동안 매우 짧은 간격으로 수십 번씩 발생할 수 있습니다. 따라서 이벤트 핸들러 내부에서 복잡한 연산이나 DOM 조작을 수행하면 성능 저하가 발생할 수 있으므로, 필요에 따라 쓰로틀링(throttling) 기법을 적용하는 것이 좋습니다.