mouseenter、mouseleave、mouseover和mouseout的区别

最新推荐文章于 2025-10-17 22:56:23 发布

原创最新推荐文章于 2025-10-17 22:56:23 发布 · 395 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

50 篇文章

订阅专栏

本文探讨了JavaScript中mouseenter和mouseover，以及mouseleave和mouseout事件的区别。主要关注当父元素和子元素绑定这些事件时，事件触发的行为差异。示例代码展示了在不同事件绑定下，鼠标移入和移出子元素时，控制台的输出情况，帮助理解事件监听在父子元素间的工作原理。

mouseenter 鼠标移入
mouseover 鼠标移入

mouseleave 鼠标移出
mouseout 鼠标移出

mouseenter 和 mouseleave 是一组

mouseover和mouseout 为另一组

区别：

父元素绑定 mouseenter 和 mouseleave 事件，子元素不会触发；
父元素绑定 mouseover 和 mouseout 事件，子元素会触发；

测试代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            margin: 0 auto;
        }
        .parentBox{
            height: 200px;
            width: 300px;
            background-color: #f00;
        }

        .childBox{
            height: 200px;
            width: 200px;
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="parentBox">
        <div class="childBox"></div>
    </div>
    <script>
        window.onload=function(){
            let parent = document.getElementsByClassName("parentBox")[0];
            // parent.addEventListener("mouseenter",()=>console.log("Mouse Enter"));
            // parent.addEventListener("mouseleave",()=>console.log("Mouse Leave"));
            parent.addEventListener("mouseover",()=>console.log("Mouse Over"));
            parent.addEventListener("mouseout",()=>console.log("Mouse Out"));
        }
    </script>
</body>
</html>