jQuery 事件：MouseOver/MouseOut vs MouseEnter/MouseLeave

  http://www.oschina.net/question/234345_45280

Javascript 开发者经常用MouseOver和MouseOut事件来触发用户鼠标进入或者移出某个HTML元素的事件。对于任何试图使用这种方式处理的人来说，你知道这个方式还不错，但是你没有想到其实那样会有很大的问题：如果当用户的鼠标进入或者移开一个被嵌套的子元素上时，mouseover和mouseout事件通过这个子元素来触发。为了克服这样的方式，我们不得不依靠一些小的方法，包括javascript的定时器来延迟基于"out"的动作（假设"over"动作可能随后取消该定时器）。

jQuery通过引进自定义事件MouseEnter，MouseLeave消除了这个让人头疼的问题。这些自定义事件是在mouseover和mouseout之上构建的；他们遍历DOM中的每个mouseover / mouseout 事件，看用户是否是真的“进入”或者“离开”那个给定的对象。现在这些事件已经被添加到jQuery中有一段时间了；但是最近我开始经常用它们，它们让我的代码变得简单。

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

<! 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 >

jQuery利用这些自定义事件，通过包裹它们在一个便利的方法hover（）中，从而变得更加简单。hover()方法需要传递2个参数，第一个参数是你的mouseenter的回调函数，第二参数是mouseleave的回调函数：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<! 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 >     </ body > </ html >

如上所示，jQuery的hover()方法简单的包裹对mouseenter() 和 mouseleave() 事件的绑定。

正如我上面说过的，这些特性成为jQuery的一部分有一段事件了，但是，我最近开始充分利用它们的优势。很显然一个小的特性可以对你的代码交互的方式产生很大影响。