Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

마우스 포인터가 HTML 요소 위를 이동할 때 스크립트 실행하기 – onmousemove 속성 완벽 가이드

웹 개발에서 사용자의 마우스 움직임에 반응하는 인터랙티브한 페이지를 만들고 싶다면 onmousemove 속성을 활용할 수 있습니다. 마우스 포인터가 특정 HTML 요소 위에서 움직이는 동안 이 속성에 지정된 자바스크립트 함수가 계속해서 호출됩니다.

아래 예제 코드를 통해 onmousemove 속성을 실제로 구현하는 방법을 확인해 보세요.

예제 코드

<!DOCTYPE html>
<html>
   <body>
      <h3 id = "myid" onmousemove = "mouseMove()">
         This is demo heading.
      </h3>
      <p>Click above and then release.</p>
      <script>
         function mouseMove() {
         document.getElementById("myid").style.color = "red";
         }
      </script>
   </body>
</html>

코드 설명

위 예제의 동작 방식은 다음과 같습니다.

1. 이벤트 속성 지정: <h3> 요소에 onmousemove = "mouseMove()" 형태로 이벤트 핸들러를 등록합니다. 이렇게 하면 마우스 포인터가 해당 제목 위에서 움직일 때마다 mouseMove() 함수가 실행됩니다.

2. 함수 정의: <script> 태그 안에 정의된 mouseMove() 함수는 document.getElementById("myid")를 통해 해당 요소에 접근한 뒤, style.color 값을 "red"로 변경합니다.

3. 실행 결과: 마우스를 제목 위로 가져가 움직이는 순간 글자 색상이 빨간색으로 바뀌는 것을 확인할 수 있습니다.

참고 사항

onmousemove 이벤트는 마우스가 요소 위에서 한 픽셀이라도 움직일 때마다 발생하기 때문에 짧은 시간 안에 수십~수백 번 호출될 수 있습니다. 따라서 무거운 연산을 수행하는 코드를 직접 넣으면 성능 저하가 발생할 수 있으므로, 필요에 따라 쓰로틀링(throttling)이나 디바운싱(debouncing) 기법을 함께 사용하는 것이 좋습니다.

또한 최신 개발 환경에서는 HTML 속성 대신 addEventListener('mousemove', 함수) 방식으로 이벤트를 등록하는 것이 유지보수 측면에서 더 권장됩니다.