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).