mouseover
원문 링크 
http://api.jquery.com/mouseover/
개요 : "mouseover" JavaScript 이벤트를 바인딩하거나, 특정 요소에 이벤트를 발생시킵니다.
- .mouseover( handler(eventObject) )
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mouseover( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달할 데이터 집합.
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mouseover( )
이 함수는 .bind('mouseover', handler) 와 .trigger('mouseover') 를 줄여 표현한 것입니다.
mouseover 이벤트는 요소에 마우스 포인터가 올라올 때 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
예를들어:
<div id="target"> Move here </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
<div>에 이벤트를 바인딩 하려면 :
$('#outer').mouseover(function() {
$('#log').append('Handler for .mouseover() called.');
});자 마우스 포인터를 이동시켜 Outer <div>에 위치시키면, <div id="log">에 텍스트를 추가해 줍니다.
다른 요소를 클릭해서 이벤트를 발생시킬 수도 있습니다.
$('#other').click(function() {
$('#outer').mouseover();
});위 코드를 추가하고 실행시키면 위와 같은 결과를 볼 수 있습니다.
이 이벤트는 이벤트 버블링 때문에 골치가 아플 수 있습니다. 예를 들면, 마우스 포인터가 Inner 요소 안으로 들어오면 mouseover 이벤트는 Outer 쪽에서도 발생하게 됩니다. 이러한 문제 때문에 mouseover 이벤트가 발생하는 시점이 잘못 잡힐 수 있습니다. 유용한 대안으로 .mouseenter() 이벤트에 대해 알아보시는 것을 권유 드립니다.
예 제
mouseover 와 mouseenter 이벤트의 차이점을 보여주는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.out { width:40%; height:120px; margin:0 15px;
background-color:#D6EDFC; float:left; }
div.in { width:60%; height:60%;
background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="out overout">
<span>move your mouse</span>
<div class="in">
</div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in">
</div>
</div>
<script>
var i = 0;
$("div.overout").mouseover(function() {
i += 1;
$(this).find("span").text( "mouse over x " + i );
}).mouseout(function(){
$(this).find("span").text("mouse out ");
});
var n = 0;
$("div.enterleave").mouseenter(function() {
n += 1;
$(this).find("span").text( "mouse enter x " + n );
}).mouseleave(function() {
$(this).find("span").text("mouse leave");
});
</script>
</body>
</html>미리보기
숫자가 올라가는 걸 잘 보시면 차이점을 아실 수 있습니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| one(), 이벤트 발생하면 바인딩 자동해제 (0) | 2012.02.24 |
|---|---|
| on(), 이벤트 바인딩 하기 (0) | 2012.02.24 |
| off(), 이벤트 해제하기 (0) | 2012.02.24 |
| jQuery API - mouseup(), 마우스를 눌렀다 뗄 때 (0) | 2012.01.13 |
| jQuery API - mouseout(), 마우스가 떠날 때 (2) | 2012.01.13 |
| jQuery API - mousemove(), 마우스가 요소에서 움직일 때 (0) | 2012.01.13 |
| jQuery API - mouseleave(), 마우스가 요소에서 벗어날 때 (0) | 2012.01.13 |
| jQuery API - mouseenter(), 마우스 진입 감지 이벤트 (2) | 2012.01.04 |