jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave > jquery

본문 바로가기

검색취소

jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave

검색 이전 다음 목록

본문

 

jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave

By Ben Nadel on January 8, 2010

For years, Javascript developers have had the MouseOver and MouseOut events for triggering events when a user mouses over and out of a given HTML element. For anyone who's tried to use these, you know that they are great, but that they come with a huge problem: the mouseover and mouseout events fire for a given element if the user mouses over or out of an element nested within the given element. To get around this behavior, we've had to resort to all short of shenanigans, including the use of Javascript timers to delay "out"-based actions (assuming an "over" action might subsequently cancel a timer).

 
 
 
 
 
 
  
 
 
 

jQuery removes this headache by introducing the custom events, MouseEnter and MouseLeave. These custom events build on top of the existing mouseover and mouseout events; they travel up the DOM with each mouseover / mouseout event triggering to see if the user has truly "entered" or "left" the given element. Now these events have been in jQuery for some time; but, I've really start to leverage them a lot lately and, let me say, they make life super easier!

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
<!DOCTYPE HTML>
<html>
<head>
<title>MouseOver / MouseOut vs. MouseEnter / MouseLeave</title>
<style type="text/css">
 
#outer-mouseover {
background-color: #F0F0F0 ;
border: 1px solid #D0D0D0 ;
float: left ;
height: 225px ;
margin-right: 20px ;
position: relative ;
width: 225px ;
}
 
#outer-mouseenter {
background-color: #F0F0F0 ;
border: 1px solid #D0D0D0 ;
float: left ;
height: 225px ;
position: relative ;
width: 225px ;
}
 
span.inner {
background-color: #B3C9DF ;
border: 1px solid #6492BF ;
color: #FFFFFF ;
height: 100px ;
left: 62px ;
line-height: 98px ;
position: absolute ;
text-align: center ;
top: 62px ;
width: 100px ;
}
 
</style>
<script type="text/javascript" src="jquery-1.4a2.js"></script>
<script type="text/javascript">
 
// When the DOM is ready, init scripts.
jQuery(function( $ ){
 
// Bind the mouse over /out to the first DIV.
$( "#outer-mouseover" ).bind(
"mouseover mouseout",
function( event ){
console.log( event.type, " :: ", this.id );
}
);
 
// Bind the mouse enter to the second DIV.
$( "#outer-mouseenter" ).bind(
"mouseenter mouseleave",
function( event ){
console.log( event.type, " :: ", this.id );
}
);
 
});
 
</script>
</head>
<body>
 
<h1>
MouseOver / MouseOut vs. MouseEnter / MouseLeave
</h1>
 
<div id="outer-mouseover">
<span class="inner">MouseOver</span>
</div>
 
<div id="outer-mouseenter">
<span class="inner">MouseEnter</span>
</div>
 
</body>
</html>
view rawcode-1.htm hosted with ❤ by GitHub

If you watch the video above, you'll see that the mouseenter and mouseleave events stay more in alignment with the "intent" of the code, rather than the technical underpinnings.

jQuery takes these custom events and makes them even easier to use by wrapping them up in the convenience method, hover(). The hover() method takes two Function arguments and binds the first one as your mouseenter event handler and the second one as your mouseleave event handler:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery Hover Method</title>
<style type="text/css">
 
#outer-hover {
background-color: #F0F0F0 ;
border: 1px solid #D0D0D0 ;
height: 225px ;
margin-right: 20px ;
position: relative ;
width: 225px ;
}
 
span.inner {
background-color: #B3C9DF ;
border: 1px solid #6492BF ;
color: #FFFFFF ;
height: 100px ;
left: 62px ;
line-height: 98px ;
position: absolute ;
text-align: center ;
top: 62px ;
width: 100px ;
}
 
</style>
<script type="text/javascript" src="jquery-1.4a2.js"></script>
<script type="text/javascript">
 
// When the DOM is ready, init scripts.
jQuery(function( $ ){
 
// Bind the mouse enter and mouse leave events using
// the convenience method, hover().
$( "#outer-hover" ).hover(
function(){
console.log( "mouseEnter" );
},
function(){
console.log( "mouseLeave" );
}
);
 
});
 
</script>
</head>
<body>
 
<h1>
jQuery Hover Method
</h1>
 
<div id="outer-hover">
<span class="inner">Hover</span>
</div>

등록된 댓글이 없습니다.

검색취소

jquery

검색
  • 눈여겨 볼만한 jQuery 플러그인
  • 눈여겨 볼만한 jQuery 플러그인

    이미지 갤러리.. 1. FUll Size Images Viewer- 간단한 제품사진보기, 이미지 갤러니 Thumb Nail 이미지 보기에 사용하면 제격-  http://www.addfullsize.com/ 2. Aj…

  • no image
  • 모달에 z-index 변경

    배추빌더 게시판 팝업 z-index 수정mw.lib/mw.skin.basic.lib.php                $(function() {            $("#dialog-message-$vie…

  • jQuery로 ajax 호출시 로딩중 이미지 보여주기
  • jQuery로 ajax 호출시 로딩중 이미지 보여주기

    요즘 유명 메이져사이트를 방문해보면 페이지 로딩 속도가 상당히 빨라졌다는 느낌이 들때가 있습니다. 방문자가 늘어난다고 서버시스템의 사양을 계속해서 높이거나 서버를 분산하기보다는최대한 효율적인 방법으로 서버의 부하를 …

  • no image
  • jQuery 합성이벤트 toggle() hover()

    jQuery 합성이벤트 toggle() hover() 보통 이벤트는 하나의 사용자 행위에 의해 발생한다.그리고 하나의 행동에 대해 하나의 응답을 내놓는다. 합성이벤트는 하나이상의 사용자 행위에 별개의 응답을 말하는 …

  • JQuery Hover Effects
  • JQuery Hover Effects

    첨부파일

    마우스 오버시 이벤트(이펙트)가 발생된다. 듀얼, 슬라이딩, 회전, 줌 등등 ... 7가지 이펙트를 지원해준다.워낙 유명한 사이트임.

?>