onmouseenter 이벤트는 마우스 포인터가 특정 요소 위로 진입(호버)하는 순간 발생하는 이벤트입니다. 사용자가 마우스를 요소 영역 안으로 가져오면 등록된 함수나 스크립트가 실행됩니다.
onmouseenter 이벤트의 주요 특징
- 마우스 포인터가 해당 요소의 경계에 진입할 때 한 번만 실행됩니다.
- onmouseover 이벤트와 유사하지만, 자식 요소 사이를 이동할 때는 다시 발생하지 않습니다. 즉, 버블링(bubbling)이 일어나지 않아 의도치 않은 중복 실행을 방지할 수 있습니다.
- 메뉴, 툴팁, 이미지 확대 등 마우스 호버 기반 인터랙션을 구현할 때 자주 활용됩니다.
기본 문법
element.onmouseenter = function() {
// 마우스가 요소에 진입했을 때 실행할 코드
};
HTML 속성 방식으로도 간단하게 사용할 수 있습니다.
실습 예제
아래 코드를 실행한 뒤 텍스트 위로 마우스를 올려 보세요. onmouseenter 이벤트가 발생하면서 알림 창이 나타납니다.
<html>
<head>
<script>
function sayHello() {
alert("Mouse Hover")
}
</script>
</head>
<body>
<p onmouseenter = "sayHello()">마우스엔터 이벤트 데모 텍스트입니다.</p>
</body>
</html>
실행 결과
문단 영역에 마우스 포인터가 진입하는 즉시 sayHello() 함수가 호출되어 "Mouse Hover"라는 메시지가 담긴 알림 창이 화면에 표시됩니다. 포인터가 요소를 벗어났다가 다시 진입하면 그때마다 이벤트가 한 번씩 발생합니다.