onmouseover 이벤트는 마우스 포인터가 특정 요소 위로 이동하는 순간 발생하는 이벤트입니다. 웹 페이지에서 버튼, 이미지, 텍스트 등에 마우스를 올렸을 때 툴팁 표시, 색상 변경, 메뉴 확장 같은 다양한 인터랙션을 구현할 때 널리 활용됩니다.
onmouseover 이벤트의 기본 동작 원리
사용자가 마우스 커서를 HTML 요소 영역 안으로 가져가면 브라우저는 자동으로 onmouseover 이벤트를 감지하고, 해당 요소에 연결된 자바스크립트 함수를 실행합니다. 이 이벤트는 onmouseout(마우스가 요소를 벗어날 때 발생)와 함께 사용하면 더욱 풍부한 사용자 경험을 만들 수 있습니다.
예제 코드
아래 코드를 실행하면 문단 위에 마우스를 올릴 때마다 경고창이 나타나는 것을 확인할 수 있습니다.
<html>
<head>
<script>
function sayHello() {
alert("Mouse Over");
}
</script>
</head>
<body>
<p onmouseover="sayHello()">마우스를 올려보세요! onmouseover 이벤트 데모 텍스트입니다.</p>
</body>
</html>
코드 설명
<head> 안에 sayHello() 함수를 정의하고, <p> 태그에 onmouseover="sayHello()" 속성을 추가했습니다. 마우스가 해당 문단 위에 위치하면 함수가 호출되어 "Mouse Over"라는 메시지가 담긴 알림 창이 화면에 표시됩니다.
실무에서의 활용 팁
인라인 방식 대신 addEventListener('mouseover', 함수)를 사용하면 HTML과 자바스크립트 코드를 분리할 수 있어 유지보수에 더 유리합니다. 또한 모바일 환경에서는 마우스 오버가 존재하지 않으므로, 반응형 웹을 개발할 때는 터치 이벤트와 함께 고려하는 것이 좋습니다.