jQuery中的mouseover和mouseenter的区别

###事件的语法区别:

mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。

mouseenter:当鼠标指针穿过元素时，会发生 mouseenter 事件。

###解析

如果给div设定了一个mouseover事件，其子孙后代都可以响应改事件，so…一旦鼠标从父级进入自己也会触发这个效果，当从子集回到父级也会触发这种效果。

mouseenter事件只作用于目标元素，而mouseover最用于目标元素及其后代元素。

###JS代码：

$(document).ready(function(){
  $("div.over").mouseover(function(){
    $(".over span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
});
           

###　HTML代码：

<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
           

###效果图：

另外，相对于配合鼠标离开事件离开，mouseover事件配合mouseout事件，而mouseenter配合mouseleave事件。那么mouseout和mouseleave的区别，其实跟mouseover和mouseleave恰恰相反。

mouseout：当鼠标指针离开元素上方时，会发生 mouseover 事件一般与mouseover配合使用。

mouseleave:当鼠标指针离开元素时，会发生 mouseenter 事件一般与mouseenter配合使用。

mouseout是当离开目标元素或进入后代元素的时候，后代元素离开并进入目标元素或者完全离开的时候，都会触发mouseout事件，而mouseleave是当鼠标离开目标元素的时候，于后代无关。

###JS代码如下:

$(document).ready(function(){
  $("div.over").mouseover(function(){
    $(".over span").text(x+=1);
  });
  $("div.over").mouseout(function(){
    $(".over span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
  $("div.enter").mouseleave(function(){
    $(".enter span").text(y+=1);
  });
});
           

效果是当鼠标进入左边的元素时并出来，且完成一套动作，此时执行的是(mouseover+mouseout)事件，输出的是6(3+3)，而进入右边的元素，且完成一套动作时，此时执行的是(mouseenter+mouseleave)事件，输出的是2(1+1).