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
});