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