[jQuery] hover 이벤트 언바인드 unbind 하기

2010년 6월 6일

jQuery에서 hover 이벤트(혹은 함수)는 꽤 유용하다. 인자값을 funtion 두 개 받는데, 마우스를 올리면 앞의 것이, 마우스를 빼면 뒤의 것이 실행된다. 말 그대로 hover 효과를 내는 것이다.

그러나 이걸 unbind할 때는 골치가 아프다. $(obj).unbind('hover') 라고 써도 작동하지 않는다. 이 때는

$(obj).unbind('mouseenter mouseleave');

라고 써야 작동한다. 아래는 이를 바탕으로 구성한 예제다. 긁어서 html 만들고 브라우저에서 열면 작동할 거다.

<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.test').hover(function(){
    $(this).css('background','yellow');
  }, function(){
    $(this).css('background','gray');
  });
  $('.unbind_hover').click(function(){
    $('.test').unbind('hover');
  });
  $('.unbind_mouse').click(function(){
    $('.test').unbind('mouseenter mouseleave');
  });
});
</script>
<style>
.test{
  width: 200px;
  height: 200px;
  background: gray;
}
</style>
<div class="test">

</div>
<input type="button" class="unbind_hover" value="unbind hover!"/>
<input type="button" class="unbind_mouse" value="unbind mouse!"/>