onmouseout 이벤트는 사용자의 마우스 포인터가 특정 요소의 영역을 벗어나는 순간 발생하는 이벤트입니다. 예를 들어, 이미지 위에 올려놓았던 마우스를 이미지 밖으로 이동시키면 해당 이미지 요소에서 onmouseout 이벤트가 트리거됩니다.
onmouseout 이벤트의 주요 특징
onmouseout 이벤트는 다음과 같은 상황에서 발생합니다.
- 마우스 포인터가 요소 내부에서 외부로 이동할 때
- 마우스가 자식 요소로 이동할 때도 부모 요소 기준으로 발생합니다 (버블링)
참고로, 버블링 없이 정확히 해당 요소를 벗어날 때만 동작하는 mouseleave 이벤트도 있으니, 상황에 따라 적절한 이벤트를 선택하는 것이 좋습니다.
예제 코드
아래 코드를 실행하면 onmouseout 이벤트가 실제로 어떻게 동작하는지 확인할 수 있습니다. 문단 영역에 마우스를 올린 뒤 밖으로 이동하면 경고창이 나타납니다.
<html>
<head>
<script>
<!--
function sayHello() {
alert("Mouse Out")
}
//-->
</script>
</head>
<body>
<p onmouseout = "sayHello()">마우스를 이 문단 위에 올렸다가 밖으로 이동해 보세요.</p>
</body>
</html>
코드 설명
위 예제에서는 <p> 태그에 onmouseout 속성을 직접 지정했습니다. 마우스 포인터가 해당 문단을 벗어나면 sayHello() 함수가 호출되고, 함수 안의 alert() 메서드가 "Mouse Out"이라는 경고창을 화면에 표시합니다.
이처럼 onmouseout 이벤트는 툴팁 숨기기, 드롭다운 메뉴 닫기, 하이라이트 효과 제거 등 다양한 UI 인터랙션에 활용할 수 있습니다.