mouseenter 和mouseover的区别

最新推荐文章于 2023-08-17 20:22:00 发布

浩哥学习编程之路

最新推荐文章于 2023-08-17 20:22:00 发布

阅读量174

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/m0_46978034/article/details/114822869

版权

js 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

mouseover鼠标经过触发

   <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father')
        var son = document.querySelector('.son')
        father.addEventListener('mouseover', function() {
            // mouseover 鼠标经过自身盒子的时候会被触发，经过子盒子的时候也会被触发 之所以子盒子会触发是因为冒泡
            console.log(11);
        })
    </script>
</body>

mouseenter 鼠标移入触发

 <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father')
        var son = document.querySelector('.son')
        father.addEventListener('mouseenter', function() {
            // mouseenter 只会经过自身的盒子才会触发，子盒子是不会触发的
            console.log(11);
        })
    </script>
</body>

总结： mouseover 鼠标经过自身盒子的时候会被触发，经过子盒子的时候也会被触发之所以子盒子会触发是因为冒泡，而mouseenter 只会经过自身的盒子才会触发，子盒子是不会触发的是因为他不会冒泡的

onmouseenter和onmouseleave 如果是一对父子元素模型，对父元素添加移入和移出，当鼠标移入父元素里面得子元素得时候，事件并没有移出然后再移入，也就是说事件元素没有切换
onmouseover 和onmouseout 如果是一对父子元素模型，对父元素添加移入和移出，当鼠标移入到父元素里面得子元素得时候，事件会先移出父元素然后再移入子元素，也就是说事件元素会有切换，事件委托得时候必须用这一对

浩哥学习编程之路

关注

0
点赞
踩
0

收藏

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

mouseover鼠标经过触发 <style> .father { width: 200px; height: 200px; background-color: pink; } .son { width: 100px; height: 100px; background-color:
复制链接

扫一扫

专栏目录