前言

mouseenter 和mouseover mouseOut和mouseLeave这几个属性在我们开发当中起到了至关重要的角色，接下来我给大家总结一下吧

mouseenter 和mouseover

在网页开发中，mouseenter 和 mouseover 是两种常用的事件类型，尽管它们看起来很相似，但在某些情况下，它们的行为有细微差别。以下是它们的区别：

事件触发范围：
- mouseover：当鼠标指针移动到某元素上时触发，包括其子元素（即使指针没有离开元素）。如果鼠标进入元素A，然后进入元素A的子元素B，mouseover 事件会在A和B上都触发。
- mouseenter：当鼠标指针初次进入某元素的边界时触发，不会在其子元素上再次触发。如果鼠标进入元素A，然后进入元素A的子元素B，mouseenter 事件只会在A上触发一次。
冒泡行为：
- mouseover：这个事件会冒泡（即事件会从目标元素向上传递到祖先元素）。例如，如果一个子元素触发了 mouseover 事件，这个事件也会传播到父元素及更高层的祖先元素。
- mouseenter：这个事件不会冒泡，只会在目标元素上触发，不会传播到任何祖先元素。
常见使用场景：
- mouseover：通常用于需要对子元素的悬停进行响应的情况。例如，当你想在用户悬停到某个菜单项或按钮上时做出响应。
- mouseenter：通常用于只需要对特定元素的首次悬停做出响应，而不关心子元素的情况。例如，当你想要在用户进入某个容器区域时触发特定动作，但不希望在容器内的其他子元素上重复触发。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mouse Events</title>
    <style>
        #container {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 50px;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        Container
        <div class="child">Child</div>
    </div>

    <script>
        document.getElementById('container').addEventListener('mouseover', function() {
            console.log('Mouse over container');
        });

        document.getElementById('container').addEventListener('mouseenter', function() {
            console.log('Mouse enter container');
        });
    </script>
</body>
</html>

在上面的示例中，当鼠标进入 #container 元素时，两种事件都会触发。但如果鼠标继续进入 .child 元素，mouseover 事件会再次触发，而 mouseenter 事件不会。

通过理解这两种事件的区别，可以更好地控制鼠标交互行为，进而提升用户体验。

`mouseOut`和`mouseLeave`

mouseOut和mouseLeave都是用于处理鼠标离开元素时触发的事件，但它们之间有一些关键区别：

冒泡行为（Bubbling behavior） ：
- mouseOut 事件会冒泡。这意味着当鼠标离开一个元素时，事件会继续向上冒泡到父元素，并且可能会在父元素上触发相同类型的事件处理程序。
- mouseLeave 事件不会冒泡。它只在鼠标真正离开绑定该事件的元素时才会触发，而不会传播到父元素。
触发条件：
- mouseOut 事件在鼠标移出元素或其子元素时都会触发。例如，如果你有一个包含子元素的父元素，当鼠标从父元素移到子元素时，mouseOut 事件会触发。
- mouseLeave 事件仅在鼠标离开元素本身时触发，不会在鼠标移到子元素时触发。因此，只有当鼠标完全离开元素（包括其所有子元素）时，才会触发 mouseLeave 事件。

举个例子：

假设有一个父元素包含一个子元素：

<div id="parent" style="width: 200px; height: 200px; background-color: lightblue;">
    Parent
    <div id="child" style="width: 100px; height: 100px; background-color: lightcoral;">
        Child
    </div>
</div>

JavaScript 代码如下：

document.getElementById('parent').addEventListener('mouseout', function() {
    console.log('mouseOut on parent');
});

document.getElementById('parent').addEventListener('mouseleave', function() {
    console.log('mouseLeave on parent');
});

当鼠标从父元素移到子元素时：

mouseOut 事件会触发，因为鼠标离开了父元素（但进入了子元素）。
mouseLeave 事件不会触发，因为鼠标仍然在父元素的范围内。

当鼠标完全离开父元素时：

mouseOut 和 mouseLeave 事件都会触发，因为鼠标完全离开了父元素及其所有子元素。

总结：

使用 mouseOut 时要注意事件冒泡和子元素情况。
使用 mouseLeave 更适合在关注鼠标是否真正离开某个元素本身的情况下。

如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！有什么写错的，需要增加的可以在评论区留言谢谢大家支持

mouseenter 和mouseover mouseOut和mouseLeave 你明白了没有

前言

mouseenter 和mouseover

示例代码

mouseOut和mouseLeave

`mouseOut`和`mouseLeave`