mouseover与mouseenter的区别

蒲公英1001

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

阅读量542

点赞数

CC 4.0 BY-SA版权

文章标签： javascript js 前端

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

本文链接：https://blog.youkuaiyun.com/wangyining070205/article/details/124511437

本文通过实际代码演示了mouseenter和mouseover的区别，前者仅在鼠标进入元素时触发，而后者在鼠标移动到元素及其子元素上时生效。通过HTML和JavaScript代码展示了这两个事件在元素层级中的行为差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看了讲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>