본문 바로가기
프로그래밍/jQuery

jQuery API - mouseleave(), 마우스가 요소에서 벗어날 때

by zoo10 2012. 1. 13.

mouseleave

원문 링크 http://api.jquery.com/mouseleave/

.mouseleave( handler(eventObject) )Returns : jQuery

개요 : 요소에서 마우스가 떠날때의 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.

  • .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 에 있는 내용임을 밝힙니다.