mouseover与mouseenter的区别

蒲公英1001

已于 2022-04-30 15:49:05 修改

阅读量477

点赞数

文章标签： javascript js 前端

于 2022-04-30 13:06:45 首次发布

本文链接：https://blog.csdn.net/wangyining070205/article/details/124511437

版权

今天看了讲mouseenter与mouseover区别的一个视频，其实不难理解，mouseover 事件在鼠标移动到选取的元素及其子元素上时触发；mouseenter 事件只在鼠标移动到选取的元素上时触发，子元素不触发。看完视频做了一个小例子来验证两者的区别。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>mouseenter与mouseover</title>
    <style>
        .father {
            width: 360px;
            height: 360px;
            background-color: #F6CF09;
            margin: 100px auto;
        }
        .son {
            width: 240px;
            height: 240px;
            background-color: #23C6D9;
			font-size: 24px;
			padding: 5px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
			mouseenter:<span>0</span><br/>
			mouseover:<span>0</span><br/>
			mouseleave:<span>0</span><br/>
			mouseout:<span>0</span>
		</div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
		var x=0,y=0,z=0,k=0;
        father.addEventListener('mouseenter', function() {
           son.children[0].innerText=++x;
        });
		father.addEventListener('mouseover', function() {
		   son.children[2].innerText=++y;
		});
		father.addEventListener('mouseleave', function() {
		   son.children[4].innerText=++z;
	    });
		father.addEventListener('mouseout', function() {
		   son.children[6].innerText=++k;
		});
    </script>
</body>
</html>

代码运行如图所示，在黄色和蓝色之间移动，mouseover和mouseout会变化，mouseenter和mouseleave不会变化。
mouseover 和mouseout是一对， mouseenter 和mouseleave是一对。
在这里插入图片描述

蒲公英1001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mouseover与mouseenter的区别

今天看了讲mouseenter与mouseover区别的一个视频，其实不难理解，mouseover 事件在鼠标移动到选取的元素及其子元素上时触发；mouseenter 事件只在鼠标移动到选取的元素上时触发，子元素不触发。看完视频做了一个小例子来验证两者的区别。代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>mouseenter与mouseover
复制链接

扫一扫