1.mouseover事件与mouseenter事件
mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
2.mouseout事件与mouseleave事件
mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
3.实例演示四个事件
<body><div id="bigdiv" style="width: 400px;height: 400px;background-color: aqua;padding-top: 100px;padding-left: 100px;box-sizing: border-box;margin: auto;"><div id="smalldiv" style="width: 200px;height: 200px;background-color: rgb(18, 218, 158);"></div></div>
</body>
<script>let bigdiv=document.querySelector('#bigdiv')bigdiv.addEventListener('mouseenter',function(){console.log('mouseenter')},false)bigdiv.addEventListener('mouseover',function(){console.log('mouseover')},false)bigdiv.addEventListener('mouseleave',function(){console.log('mouseleave')},false)bigdiv.addEventListener('mouseout',function(){console.log('mouseout')},false)</script>
上述代码设置了两个div，给大div绑定了四个事件，现在我们用鼠标依次穿过两个div（如下图），看一下控制台输出结果
仔细观察上图以及输出结果：在鼠标进入bigdiv时，也就是在1的位置时，发生了mouseover和mouseenter事件，并且over比enter先触发；在鼠标进入samlldiv时，也就是在2的位置时，触发了mouseout和mouseover，这里触发out是因为离开了父元素bigdiv进入子元素smalldiv触发的，mouseover事件在子元素也会触发，所以此时也触发了mouseover事件；
接下来的鼠标继续右移，到3的位置，因为离开子元素smalldiv，所以触发mouseout，又再次进入父元素bigdiv，所以触发mouseover；当鼠标移到4时，离开box时触发了mouseout和mouseleave事件。
通过以上实例，可以总结出：
- mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数需要看子元素数量。
- mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。
- mouseover和mouseout比mouseenter和mouseleave先触发
