onmouseleave 이벤트는 마우스 포인터가 요소 영역 밖으로 벗어나는 순간 발생하는 이벤트입니다. 사용자가 특정 요소 위에 마우스를 올려둔 상태에서 해당 요소를 떠날 때 지정된 JavaScript 함수를 실행할 수 있어, 툴팁 숨기기, 하이라이트 해제, 메뉴 닫기 등 다양한 인터랙션에 활용됩니다.
onmouseleave와 onmouseout의 차이점
비슷해 보이지만 두 이벤트에는 중요한 차이가 있습니다.
- onmouseleave: 마우스가 해당 요소 자체를 완전히 벗어날 때만 발생하며, 자식 요소로 이동할 때는 발생하지 않습니다. 즉, 이벤트 버블링이 일어나지 않습니다.
- onmouseout: 요소를 벗어나거나 자식 요소로 이동할 때도 발생합니다.
따라서 자식 요소가 있는 복잡한 구조에서 정확하게 '요소 이탈'만 감지하고 싶다면 onmouseleave를 사용하는 것이 좋습니다.
예제 코드
아래 예제를 실행하면 마우스가 문단 영역을 벗어날 때 알림 창이 나타납니다. HTML 속성 방식으로 직접 이벤트를 연결하는 기본적인 사용법을 확인해 보세요.
<html>
<head>
<script>
function sayHello() {
alert("Mouse Leave");
}
</script>
</head>
<body>
<p onmouseleave = "sayHello()">마우스를 이 영역 밖으로 움직여 보세요.</p>
</body>
</html>
addEventListener 방식으로 등록하기
HTML 태그 안에 직접 작성하는 대신, JavaScript에서 addEventListener를 사용해 이벤트를 등록하는 것이 더 권장되는 방식입니다. 코드의 구조와 동작을 분리할 수 있어 유지보수에 유리합니다.
const target = document.querySelector("p");
target.addEventListener("mouseleave", function () {
console.log("마우스가 요소를 떠났습니다.");
});
정리
onmouseleave 이벤트는 마우스 포인터가 요소를 벗어날 때 실행되며, 자식 요소 간의 이동에는 반응하지 않기 때문에 의도치 않은 이벤트 중복 발생을 방지할 수 있습니다. onmouseenter(진입 시 발생)와 함께 사용하면 요소 진입/이탈 상태를 깔끔하게 처리할 수 있습니다.