mouseenter與mouseover區別

admin發表於2019-02-15

程式設計中有很多概念比較類似，甚至在某些場景下功能完全一樣。

當然兩者是有區別的，否則就沒有同時存在的必要，這些區別也決定了它們各自應用場景。

標題中兩事件就如上面闡述那樣，某些場景下功能完全相同，但區別也很明顯。

下面通過程式碼例項介紹一下兩者的共同點和區別，希望能夠給需要的朋友帶來一些朋友。

一.兩個事件的共同點：

從名稱來看，兩個事件都達到了同一個目的，那就是滑鼠指標進入指定元素之內。

僅從上面這個單純的角度來看，兩個事件的表現可以說完全一樣，看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:200px;
  height:60px;
  text-align: center;
  line-height: 60px;
  background-color:#ccc;
  margin:5px;
}
</style>
<script>
window.onload=function(){
  let enter=document.getElementById("enter");
  let over=document.getElementById("over");
  enter.onmouseenter=function(){
    this.innerHTML="螞蟻部落一";
  }
  over.onmouseover=function(){
    this.innerHTML="螞蟻部落二";
  }
}  
</script>  
</head>
<body>
  <div id="enter"></div>
  <div id="over"></div>              
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/15/161555a1j7x8k497a1k271.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分別為兩個div註冊各自事件的事件處理函式，兩個事件的表現可以說完全一樣。

滑鼠指標移入兩個div各自事件會觸發，然後將指定的字串寫入div中。

上面兩個事件的表現正是讓人迷惑的地方，再通過程式碼例項解決兩者的區別。

二.兩個事件的區別：

兩個事件的最重要的區別是，mouseenter不支援事件冒泡，mouseover支援事件冒泡。

關於事件冒泡現象可以參閱JavaScript 事件冒泡一章節。

也是由於這個區別，會在實際應用中導致一些不同的現象，也決定了兩者應用場景的不同。

下面通過程式碼例項演示一下由於是否支援事件冒泡導致一些區別。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#enter,#over{
  width:250px;
  height:120px;
  background-color:#ccc;
  margin:10px;
  overflow:hidden;
}
#enterinner,#overinner{
  width:100px;
  height:50px;
  text-align:center;
  line-height:50px;
  color:red;
  margin:50px;
  background-color:green;
}

</style>
<script>
window.onload=function(){
  let enter=document.getElementById("enter");
  let enterInner=document.getElementById("enterinner");
  let enterCount=0;

  let over=document.getElementById("over");
  let overInner=document.getElementById("overinner");
  let overCount=0;
  
  enter.onmouseenter=function(){
    enterCount=enterCount+1;
    enterInner.innerHTML=enterCount;
  }

  over.onmouseover=function(){
    overCount=overCount+1;
    overInner.innerHTML=overCount;
  }

}  
</script>  
</head>
<body>
<div id="enter">
  <div id="enterinner"></div>
</div>     
<div id="over">
  <div id="overinner"></div>
</div>  
</body>
</html>

上述程式碼可以很好的演示由於是否具有事件冒泡導致的一些差別。

下面介紹一下如何通過上述程式碼來演示兩者之間的區別。

（1）.為enter元素註冊mouseenter事件處理函式，當滑鼠移入enter元素的時候，事件觸發。

（2）.於是enterCount數字加1，這個沒有任何異議，不過下面要注意了。

（3）.當滑鼠指標移入它的子元素的時候，子元素的mouseenter事件觸發，但是由於此事件並不具有冒泡效果，所以不會傳播到父元素，於是enterCount不會再增加。

（4）.當滑鼠指標從子元素再次移入父元素的時候，事件不再觸發。

（5）.再來看mouseover事件，當滑鼠移入over元素，此事件會觸發，並且數字加1，毫無異議。

（6）.現在滑鼠移入它的子元素，數字在原來基礎還會加1，這是因為此事件具有冒泡現象，事件傳播到over元素，於是又一次執行事件處理函式，下面的這一點要特別注意。

（7）.當滑鼠從子元素中移出到父元素的時候，數字也會在原來基礎上加1，這一點與mouseenter事件不同。

總結如下：

（1）.當滑鼠指標從元素邊界之外移入的時候才會觸發mouseenter事件。

（2）.滑鼠指標移入無論是從編輯外移入還是從子元素移入都會觸發mouseover事件。

清晰了兩個事件的區別之後，就可以根據當前的實際需求，選擇更為恰當的事件，比如，當我們僅僅是處理父元素相關事物，可以考慮mouseenter事件，因為它沒有事件冒泡等因素的影響。如果父元素的子元素較多，需要針對滑鼠移入每一個子元素進行的事件進行處理，如果對每一個子元素註冊事件處理函式，那實在太麻煩了，這時候推薦使用mouseover事件，利用其冒泡原理，將事件註冊在父元素上。

相關文章