前端面試題之mouseover和mouseenter的區別
阿新 • • 發佈：2019-02-08
曾經一度認為，mouseover和mouseenter是不是js設計者弄多餘的，印象中這兩個的效果都是一樣的吧？！
直到去面試的時候被面試官提出了，說說mouseover和mouseenter有什麼區別，整個人都愕然了，用了那麼就js，還真沒有去認真思考過這個問題。那到底這兩個事件的觸發有什麼不同，他們的存在又有何意義呢，通過兩個栗子來解析一下
栗子一：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter").text(y+=1);
});
});
</script>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
mouseover 事件：
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
mouseenter 事件：
</div>
|
從上面的栗子可以看到，當繫結著兩個事件的元素裡面沒有子元素的時候，這兩個事件的觸發效果是一致的。
栗子二：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
<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的當前元素以及它裡面的子元素的時候，都會觸發，而經過繫結mouseenter的元素時，只會在滑鼠剛進入的時候觸發，當進入其子元素的時候，是不會再觸發的了。
總結兩句話
-
不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。對應mouseout
-
只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。對應mouseleave