웹 개발을 하다 보면 사용자의 마우스가 특정 요소 위에서 벗어나는 순간에 어떤 동작을 실행해야 하는 경우가 있습니다. 이럴 때 사용하는 것이 바로 HTML의 onmouseout 속성입니다.
onmouseout 속성이란?
onmouseout 속성은 마우스 포인터가 해당 요소의 영역 밖으로 이동했을 때 지정된 자바스크립트 함수나 스크립트를 자동으로 실행시키는 이벤트 핸들러입니다. 예를 들어, 메뉴에서 마우스가 떠날 때 하위 메뉴를 닫거나, 이미지 위에서 벗어날 때 원래 상태로 되돌리는 등의 인터랙션을 쉽게 구현할 수 있습니다.
반대로 마우스가 요소 위에 올라갔을 때 동작을 실행하려면 onmouseover 속성을 사용하면 되며, 두 이벤트를 함께 활용하면 더욱 풍부한 사용자 경험을 만들 수 있습니다.
onmouseout 사용 예제
아래 코드는 제목(h3) 요소에 onmouseout 이벤트를 적용하여, 마우스 포인터가 제목을 벗어나는 순간 글자 색상이 빨간색으로 바뀌도록 구현한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h3 id = "myid" onmouseout = "mouseOut()">
This is demo heading.
</h3>
<p>Click above and then release.</p>
<script>
function mouseOut() {
document.getElementById("myid").style.color = "red";
}
</script>
</body>
</html>코드 설명
이 예제의 동작 방식은 다음과 같습니다.
1. 이벤트 등록: h3 요소에 onmouseout = "mouseOut()" 형태로 이벤트 핸들러를 직접 지정했습니다. 마우스가 이 요소를 벗어나면 mouseOut() 함수가 호출됩니다.
2. 스크립트 실행: mouseOut() 함수 내부에서는 document.getElementById("myid")를 통해 해당 요소에 접근한 뒤, style.color 속성을 "red"로 변경합니다.
3. 결과 확인: 브라우저에서 페이지를 열고 마우스 포인터를 제목 위에 올렸다가 밖으로 이동하면, 제목 텍스트의 색상이 빨간색으로 즉시 변경되는 것을 확인할 수 있습니다.
참고 사항
onmouseout 이벤트는 요소뿐만 아니라 그 자식 요소로 마우스가 이동할 때도 발생한다는 점에 유의해야 합니다. 자식 요소까지 고려하지 않고 정확히 요소를 벗어날 때만 동작하게 하려면, 이벤트 객체의 relatedTarget 속성을 확인하거나 CSS의 :hover 가상 클래스 또는 mouseleave 이벤트를 사용하는 것이 좋습니다.