JavaScript裏mouseenter和mouseleave與mouseover和mouseout的區別

今天總結下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一塊兒使用，而使用場景經過上面的解析，你們也該心中有數了吧。

本人爲前端菜鳥，如上面言論有誤，但願你們能在下方評論指出，讓菜鳥能夠飛一飛~~