今天總結下mouseenter、mouseleave、mouseover、mouseout的區別，之前一直懵着用沒仔細研究他們的區別，結果終於踢到鐵板了。
上代碼：
<style>
div { margin: 0 auto; }
.box { box-sizing: border-box; padding: 30px 0; width: 300px; border: 1px solid #005AA0; }
.sonBox { width: 150px; height: 150px; background-color: #00823C; }
</style>
<div class="box">
<div class="sonbox"></div>
</div>
<script type="text/javascript">
var box = document.getElementsByClassName("box")[0];
box.addEventListener("mouseenter",function(){
console.log("MouseEnter!");
});
box.addEventListener("mouseover",function(){
console.log("MouseOver!");
});
box.addEventListener("mouseout",function(){
console.log("MouseOut!");
});
box.addEventListener("mouseleave",function(){
console.log("MouseLeave!");
});
</script>
如上面建一個div類名為box里面有個子div.sonbox，測試一下當我們鼠標穿過整個box會打印什么，結果如下圖示：
從上面很容易可以知道，在鼠標在1的時候也就是鼠標進入box時，發生了mouseover和mouseenter，並且over比enter先觸發；鼠標在2的時候也就是進入sonbox時，觸發了mouseout和mouseover，這里觸發out很容易理解，因為離開了父元素box進入子元素觸發的，但這里緊接着觸發了over，為什么呢？，原來mouseover事件在子元素也會觸發；接下來的3也就很好理解了，因為離開子元素sonbox所以觸發mouseout，又再次進入父元素box觸發mouseover；當鼠標移到4時，離開box時觸發了mouseout和mouseleave。
總結：
- mouseover和mouseout在父元素和其子元素都可以觸發，當鼠標穿過一個元素時，觸發次數得依子元素數量而言。
- mouseenter和mouseleave只在父元素觸發，當鼠標穿過一個元素時，只會觸發一次。
- mouseover和mouseout比mouseenter和mouseleave先觸發
因此一般mouseover和mouseout一起使用，mouseenter和mouseleave一起使用，而使用場景通過上面的解析，大家也該心中有數了吧。
本人為前端菜鳥，如上面言論有誤，希望大家能在下方評論指出，讓菜鳥可以飛一飛~~