引言
在自己动手练习一些项目实例的时候,发现mouseover和mouseenter这俩事件功能有点相似,但应用场景却不同。
所以想整篇博客梳理梳理
mouseover和mouseenter的不同点:
不同点有两方面:
- 事件的触发时机
- 是否支持冒泡
一、事件的触发时机?
下面是我自己做的测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
ul{
width: 300px;
height: 200px;
padding-top: 10px;
padding-left: 50px;
background-color: #0ff;
}
ul li{
width: 200px;
height: 50px;
list-style: none;
background-color: #0b6;
margin-top: 30px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<ul>
<li class="a">
我是li.a
</li>
<li class="b">
我是li.b
</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function(){
$("ul").mouseenter(function(){
console.log("经过一次");
})
})
</script>
</body>
</html>
mouseover测试:
由图看出:当光标进入ul和子元素li的时候都会触发mouseover事件
mouseenter测试:
由图看出:只有当光标从外界进入ul的时候才会触发mouseenter事件,进入li不会触发mouseenter
因此我们可以得出如下结论:
mouseover:当鼠标移入元素或子元素都会触发事件。
mouseenter:当鼠标移入元素才会触发事件。
二、事件是否支持冒泡?
官方文档的一段话:
Unlike the onmouseover event, the onmouseenter event does not bubble.
从官方文档可以看出:mouseenter事件不支持冒泡!!而mouseover时间支持冒泡
所以:光标在进入或离开元素的子元素的时候,会触发mouseover和mouseout事件,但不会触发mouseenter和mouseleave事件!
以上就是mouseover和mouseenter的异同了
显然,mouseover事件因为具有冒泡的性质,在子元素内移动的时候会经常被触发,如果我们不希望这样的话,就需要使用严谨一点的mouseenter方法了。