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