jquery中mouseover和mouseenter的區別

jquery中mouseover和mouseenter的區別

1、總結

一句話總結：

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

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

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

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

從這裏的一個小插曲上，咱們應該能夠看出，mouseenter是穿過，因此只能觸發一次改事件，而mouseover是位於上方，

能夠想下，若是給div設定了一個mouseover事件，其子孫後代均可以響應改事件，so...一旦鼠標從父級進入本身也會觸發這個效果，當從子集回到父級也會觸發這種效果。

因此，你能夠這麼理解：mouseenter事件只做用於目標元素，而mouseover最用於目標元素及其後代元素。

 

一、mouseover事件、mouseout事件、mouseenter事件、mouseleave事件的配合關係如何？

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

 

 

2、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