JQ的hover方法與mouseenter、mouseleave、mousemove、mouseover、mouseout 之間的關係

這幾個都是JQ處理鼠標hover相關的事件。下面對其之間的區別和聯繫做一下詳細分析。

• mouseenter
  當鼠標指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。
  與 mouseover 事件不同，只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。如果鼠標指針穿過任何子元素，同樣會觸發 mouseover 事件。
• mouseleave
  當鼠標指針離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。
  與 mouseout 事件不同，只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。如果鼠標指針離開任何子元素，同樣會觸發 mouseout 事件。
• mousemove
  當鼠標指針在指定的元素中移動時，就會發生 mousemove 事件。
  mousemove事件處理函數會被傳遞一個變量——事件對象，其.clientX 和 .clientY 屬性代表鼠標的座標

//獲得鼠標指針在頁面中的位置
$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

• mouseover
  當鼠標指針位於元素上方時，會發生 mouseover 事件。該事件大多數時候會與 mouseout 事件一起使用。
  註釋：與 mouseenter 事件不同，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。

• mouseout
  當鼠標指針從元素上移開時，發生 mouseout 事件。該事件大多數時候會與 mouseover 事件一起使用。
  註釋：與 mouseleave 事件不同，不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。

• hover
  hover()是一個複合方法，相當於mouseenter + mouseleave一起使用的情況

$("element").hover(
  function () {
    //do something enter
  }, 
  function () {
    //do something exit
  }
);
$("element").mouseenter(function(){ 
    //do something over
}).mouseleave(function() { 
    //do something out
});