mouseover和mouseenter事件使用函数的区别

最新推荐文章于 2023-01-04 10:47:45 发布

智者_若愚

最新推荐文章于 2023-01-04 10:47:45 发布

阅读量253

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/qq_35392733/article/details/101621505

版权

大前端专栏收录该内容

68 篇文章 3 订阅

订阅专栏

今天做一个小案例，是一个分享的滑动效果。鼠标移入则滑出隐藏的内容。
一开始非常不理解为何老师用jquery的mouseenter事件方法监听而不用mouseover。
这里就要谈谈事件冒泡机制了，简单的理解就是内层dom文档监听或发生的事件会向上层传递。当执行到有事件监听的元素时执行对应的监听函数直到文档结束为止。
那么困惑我的就是这个内层元素没有设置监听函数当发生相应的事件时它还会不会向上层传递这个事件发生的信息呢？
所以我就要设计一个实验来证明它！如果验证了就说明了为何当用mouseover事件监听方法时会出现多次执行的情况。
验证思路如下：
在一个div里添加一个按钮不设置任何的事件监听函数。然后给这个父层的div设置宽高样式，和一个click事件监听函数。当点击这个button时看父层div是否执行了相应的事件函数.
验证代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq14 动画阶段练习2</title>
	<style type="text/css">
		#wrap{
			width: 300px;
			height: 300px;
			background:red;
			text-align: center;
			line-height: 300px;
		}
	</style>
</head>
<body>
<div id="wrap">
	<input type="button" value="点击">
</div>
	<script>
		var d=document.getElementById('wrap')
		d.onclick=function(){
			alert('asd')
		}
	</script>
</body>
</html>