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先触发