mouseenter、mouseleave与mouseover、mouseout都是处理鼠标的移入移出事件，但mouseover、mouseout事件在绑定节点的子节点中也会触发，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #out{ width: 200px; height:200px; background-color: red; display: flex; justify-content: center; align-items:center; } #in{ width: 100px; height:100px; background-color: green; } </style> <body> <div id="out"> <div id="in"></div> </div> <script> let outDom = document.querySelector('#out'); outDom.onmouseenter = function () { console.log('mouseenter'); }; outDom.onmouseleave = function () { console.log('mouseleave'); }; outDom.onmouseover = function (event) { console.log('mouseover'); }; outDom.onmouseout = function (event) { console.log('mouseout'); }; </script> </body> </html>以上代码创建两个父子关系的div，给#out分别绑定mouseenter、mouseleave与mouseover、mouseout事件，将鼠标从左至右滑过观察控制台打印结果：
可以发现当鼠标划过#out左侧边框时出发了mouseover与mouseenter事件，紧接着划过#in左侧边框时触发了mouseout与mouseover事件，划过#in右侧边框时又触发了mouseout与mouseover事件，直达最后移出#out时触发了mouseout与mouseleave事件。综上观察可以看出：mouseenter与mouseleave只在鼠标从#out移入、移出时才会触发，而mouseenter与mouseout不但会在#out移入移出触发，还会在子节点#in移入移出时触发。
