onmouseover 이벤트란?
onmouseover 이벤트는 마우스 포인터가 특정 HTML 요소 위로 이동했을 때 발생합니다. 이 이벤트를 활용하면 사용자가 요소에 마우스를 올리는 순간 원하는 JavaScript 함수를 자동으로 실행할 수 있습니다.
JavaScript 함수 호출 방법
호출 방법은 매우 간단합니다. HTML 요소에 onmouseover 속성을 추가하고, 속성값으로 실행하고자 하는 함수 이름을 지정하면 됩니다. 마우스가 해당 영역에 진입하는 즉시 지정된 함수가 호출됩니다.
예제 코드
아래 예제를 직접 실행해 보면 onmouseover 이벤트에서 JavaScript 함수를 호출하는 방법을 쉽게 이해할 수 있습니다.
<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 영역에 진입하면 "Mouse Over"라는 텍스트를 화면에 출력합니다.
- out() 함수: 마우스가 div 영역을 벗어나면 "Mouse Out"이라는 텍스트를 출력합니다.
- onmouseover="over()": div 요소에 마우스가 올라가는 순간 over() 함수가 호출됩니다.
- onmouseout="out()": div 요소에서 마우스가 떠나는 순간 out() 함수가 호출됩니다.
이처럼 onmouseover 이벤트는 툴팁 표시, 드롭다운 메뉴 확장, 이미지 전환 등 다양한 인터랙티브 웹 기능을 구현할 때 널리 활용됩니다. onmouseout 이벤트와 함께 사용하면 마우스의 진입과 이탈 상태를 모두 처리할 수 있어 더욱 완성도 높은 사용자 경험을 제공할 수 있습니다.