本文也同步發表在我的公眾號“我的天空”
鼠標的移入移出事件，是在我們做一些前端效果時使用相當頻繁的事件，但在JS中，鼠標的移入移出事件有兩對，分別是mouseover、mouseout；以及mouseenter、mouseleave，如果沒有對其的區別有清新的認識話，則很容易掉坑里！
譬如某次有人反映需要做以下這么一個效果：當鼠標移入背景圖片時，將有一個遮罩層升起，當鼠標移出后，遮罩層落下（如圖），該效果還是很常見的：
其采用jquery的animate()結合鼠標的移入移出事件來處理，背景圖片的class設為A，遮罩層的class為B，通過設置其bottom屬性來實現其升起與落下，其代碼如下：
$(".A").mouseover(function(){
$(".B", this).animate({"bottom":"0px"},"slow");
}).mouseout(function(){
$(".B", this).animate({"bottom":"-210px"},"slow");
});
但是該代碼運行的效果卻不是預期：
很明顯，遮罩層的升降比預期的次數要多一次。問題就是出現在mouserover與mouerout的選取的不正確。
我們首先來看下mouseover與mouseout事件的解釋：
mouseover：鼠標指針位於一個元素的外部，然后用戶將其首次移入另一個元素邊界之內是觸發。
mouseout：鼠標指針位於一個元素上方，然后將其移入另一個元素時觸發，這個元素可以位於前一個元素的外部，也可能是這個元素的內部。
我們來分析一下我們實際遇到的情況，當鼠標移入背景圖片時，毫無疑問觸發mouseover事件，遮罩層開始上移，當遮罩層上移至鼠標上方時，雖然我們沒有移動鼠標，但是鼠標卻從背景圖片區域進入遮罩層區域，那么觸發了mouseout事件（遮罩層屬於背景圖片內部的元素），這樣便將遮罩層下移的animate()也加入了事件隊列，當其升起過程結束后，自然又開始下移的過程，導出效果不是我們的預期。
要修正該代碼，實際上應該使用mouseenter與mouseleave事件，這兩個事件在鼠標移入后代元素時不會被觸發：
$(".A").mouseenter(function(){
$(".B", this).animate({"bottom":"0px"},"slow");
}).mouseleave(function(){
$(".B", this).animate({"bottom":"-210px"},"slow");
});
mouseover、mouseout與mouseenter、mouseleave別再傻傻分不清楚啦！