jquery中mouseover和mouseenter的區別

一、總結

一句話總結：

見名知意：enter（進入）和over（在上方）的意思好好思考一下

mouseover就是從子元素回到自己的時候也會觸發

mouseover：當鼠標指針位於元素上方時，會發生 mouseover 事件。

mouseenter:當鼠標指針穿過元素時，會發生 mouseenter 事件。

從這里的一個小插曲上，我們應該可以看出，mouseenter是穿過，所以只能觸發一次改事件，而mouseover是位於上方，

可以想下，如果給div設定了一個mouseover事件，其子孫后代都可以響應改事件，so...一旦鼠標從父級進入自己也會觸發這個效果，當從子集回到父級也會觸發這種效果。

所以，你可以這么理解：mouseenter事件只作用於目標元素，而mouseover最用於目標元素及其后代元素。

 

1、mouseover事件、mouseout事件、mouseenter事件、mouseleave事件的配合關系如何？

mouseover事件配合mouseout事件，而mouseenter配合mouseleave事件

 

 

二、JQ中mouseover和mouseenter的區別

轉自或參考：JQ中mouseover和mouseenter的區別
https://www.cnblogs.com/wymbk/p/5711715.html

 

 　在對於剛開始學習JQ的初學者來說，mouseover事件和mouseenter事件總是傻傻分不清楚，畢竟剛開始學習的時候，需求沒那么詳細，畢竟倆事件的大致意思都一樣

---就是鼠標移上去，就執行該事件的自定義函數。其實我們自己去看下他們的概念，我想你應該可以從中發現區別於不同：

　　　　mouseover：當鼠標指針位於元素上方時，會發生 mouseover 事件。

　　　　mouseenter:當鼠標指針穿過元素時，會發生 mouseenter 事件。

　　從這里的一個小插曲上，我們應該可以看出，mouseenter是穿過，所以只能觸發一次改事件，而mouseover是位於上方，

可以想下，如果給div設定了一個mouseover事件，其子孫后代都可以響應改事件，so...一旦鼠標從父級進入自己也會觸發這個效果，當從子集回到父級也會觸發這種效果。

所以，你可以這么理解：mouseenter事件只作用於目標元素，而mouseover最用於目標元素及其后代元素。

　　如果還沒明白，DOM案例如下：

 

　　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是當鼠標離開目標元素的時候，於后代無關。

　　原諒我的懶惰，圖和HTML代碼參考上圖，

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

 

　　看完必須明白了吧    b(￣▽￣)d