mouseenter、mouseleave、mouseover和mouseout的区别

最新推荐文章于 2023-05-18 11:37:38 发布

guokanglun

最新推荐文章于 2023-05-18 11:37:38 发布

阅读量306

点赞数 1

分类专栏： JavaScript基础知识

本文链接：https://blog.csdn.net/gklcsdn/article/details/113796384

版权

JavaScript基础知识专栏收录该内容

59 篇文章 0 订阅

订阅专栏

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>

guokanglun

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
mouseenter、mouseleave、mouseover和mouseout的区别

mouseenter 鼠标移入mouseover 鼠标移入mouseleave 鼠标移出mouseout 鼠标移出mouseenter 和 mouseleave 是一组mouseover和mouseout 为另一组区别：父元素绑定 mouseenter 和 mouseleave 事件，子元素不会触发；父元素绑定 mouseover 和 mouseout 事件，子元素会触发；测试代码<!doctype html><html lang="en"&gt
复制链接

扫一扫