웹 개발에서 마우스 이벤트는 사용자와 페이지 간의 상호작용을 처리하는 핵심 요소입니다. 그중 onmouseout 이벤트는 마우스 포인터가 특정 요소의 영역을 벗어나는 순간 발생하며, 이 시점에 원하는 JavaScript 함수를 실행할 수 있습니다.
onmouseout 이벤트의 동작 방식
사용자가 요소 위에 마우스를 올렸다가 해당 요소 밖으로 이동하면 브라우저가 자동으로 onmouseout 이벤트를 감지합니다. HTML 태그에 직접 이벤트 속성을 지정하고, 그 값으로 호출할 함수 이름을 작성하면 됩니다.
보통 onmouseout은 짝을 이루는 onmouseover 이벤트와 함께 사용됩니다. onmouseover는 마우스가 요소에 진입할 때, onmouseout는 요소를 떠날 때 각각 트리거되므로 두 이벤트를 조합하면 진입/이탈 상태에 따라 서로 다른 동작을 구현할 수 있습니다.
예제 코드
아래 예제는 div 영역에 마우스를 올리고 벗어날 때 각각 다른 함수를 호출하여 결과를 화면에 출력합니다. 직접 실행해 보면서 onmouseover와 onmouseout의 차이를 확인해 보세요.
<html>
<head>
<script>
function over() {
document.write("Mouse Over");
}
function out() {
document.write("Mouse Out");
}
</script>
</head>
<body>
<p>마우스를 div 영역 안쪽으로 가져가 보세요:</p>
<div onmouseover="over()" onmouseout="out()">
<h2>여기는 div 영역 내부입니다</h2>
</div>
</body>
</html>코드 설명
- over() 함수: 마우스가 div 영역에 진입하면(onmouseover) 호출되어 "Mouse Over"라는 텍스트를 출력합니다.
- out() 함수: 마우스가 div 영역을 벗어나면(onmouseout) 호출되어 "Mouse Out"이라는 텍스트를 출력합니다.
- div 태그: onmouseover="over()" 와 onmouseout="out()" 속성을 통해 각 이벤트 발생 시 대응되는 함수가 실행됩니다.
실무에서의 활용 팁
위 예제는 학습용으로 document.write()를 사용하지만, 실제 프로젝트에서는 이미 렌더링된 문서가 덮어써질 수 있으므로 주의가 필요합니다. 실무에서는 console.log()로 디버깅하거나, DOM 조작(예: element.innerHTML 변경) 또는 CSS 클래스 토글 방식을 활용해 툴팁 표시, 드롭다운 메뉴 닫기, 하이라이트 해제 등 다양한 UI 효과를 구현하는 것이 좋습니다.