mouseenter和mouseleave与mouseover和mouseout的区别

最新推荐文章于 2023-08-08 16:27:37 发布

侧耳倾听...

最新推荐文章于 2023-08-08 16:27:37 发布

阅读量2.2w

点赞数 16

分类专栏： JavaScript 文章标签： mouseenter mouseleave mouseover mouseout

本文链接：https://blog.csdn.net/xm_w_xm/article/details/89400939

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一、mouseenter（指针穿过，子集不执行）

当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。

注意：与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。参见页面底部演示实例。

mouseover/mouseout事件支持冒泡，

二、mouseover（指针上方，子元素执行）

当鼠标指针位于元素上方时，会发生 mouseover 事件。

mouseover() 方法触发 mouseover 事件，或添加当发生 mouseover 事件时运行的函数。

注意：与 mouseenter 事件不同，mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发，mouseenter 事件只有在鼠标指针进入被选元素时被触发。

*mouseover() 与 mouseenter() 之间的不同（先执行mouseover后mouseenter）

mouseover 事件在鼠标移动到选取的元素及其子元素上时触发。
mouseenter 事件只在鼠标移动到选取的元素上时触发。

mouseover/mouseout事件支持冒泡，绑定的事件会冒泡到子标签上。
mouseenter/mouseleave事件则只针对所绑定的标签，不会冒泡到子标签上。

（mouseover在进入到子元素也会执行，而mouseenter 只会执行绑定的元素，进入子元素不执行）

mouseover可以看到进入父集元素，进入到子集时、离开子集进入父级，一共三次

而mouseout只有进父级时一次

三、mouseleave（指针离开元素时，子元素不执行）

当鼠标指针离开元素时，会发生 mouseleave 事件。

该事件大多数时候会与 mouseenter 事件一起使用。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。

注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

四、mouseout(指针从元素上移开,子元素执行)

当鼠标指针从元素上移开时，发生 mouseout 事件。

该事件大多数时候会与 mouseover 事件一起使用。

mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

mouseleave 与 mouseout 的不同

mouseout可以看到离开父集进入子集，出子集元素，出父级元素一共三次

而mouseout只有出父级时一次

重左到右的走，然后进行的那个方法和先后的顺序

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="box">
			<div class="sonbox"></div>
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementsByClassName("box")[0];　　
		box.addEventListener("mouseenter", function() {　　　　　　
			console.log("MouseEnter!");　　　　
		});　　　　
		box.addEventListener("mouseover", function() {　　　　　　
			console.log("MouseOver!");　　　　
		});　　　　
		box.addEventListener("mouseout", function() {　　　　　　
			console.log("MouseOut!");　　　　　
		});　　　　
		box.addEventListener("mouseleave", function() {　　　　　　
			console.log("MouseLeave!");　　　　
		});
	</script>
	<style>
		div {
			margin: 0 auto;
		}
		
		.box {
			box-sizing: border-box;
			padding: 30px 0;
			width: 300px;
			border: 1px solid red;
		}
		
		.sonbox {
			width: 150px;
			height: 150px;
			background-color: pink;
		}
	</style>

</html>

http://www.cnblogs.com/xpl-blogs/p/6528012.html