JS——mouseover和mouseenter的区别

甜甜酷盖

已于 2022-04-12 22:01:49 修改

阅读量1.8k

点赞数

分类专栏： JS 文章标签： javascript 前端

于 2022-02-15 14:08:46 首次发布

本文链接：https://blog.csdn.net/weixin_52148548/article/details/122942727

版权

JS 专栏收录该内容

31 篇文章 8 订阅

订阅专栏

区别
举例
补充

区别

mouseover:鼠标移入事件所绑定的元素或其子元素时，都会触发该事件。（具有冒泡特性）
mouseenter:只有鼠标移入事件所绑定的元素时，才会触发该事件。（不具有冒泡特性）

举例

mouseover：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #big{
        background-color: antiquewhite;
        width: 500px;
        height: 500px;
        margin: auto;        
    }
    #small{
        background-color: chartreuse;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div id="big">
        <div id="small">
        </div>
    </div>
    <script>
        let div_big=document.querySelector('#big')
        div_big.onmouseover=function(){
           console.log('mouseover')//冒泡特性
        }
    </script>
</body>
</html>

结果：在鼠标进入当前元素以及它里边的子元素时，都会触发mouseover事件，控制台显示打印了两次mouseover。
在这里插入图片描述
mouseenter:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #big{
        background-color: antiquewhite;
        width: 500px;
        height: 500px;
        margin: auto;        
    }
    #small{
        background-color: chartreuse;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div id="big">
        <div id="small">
        </div>
    </div>
    <script>
        let div_big=document.querySelector('#big')
        div_big.onmouseenter=function(){
           console.log('mouseenter')//不具有冒泡特性
        }
    </script>
</body>
</html>

结果：在鼠标经过绑定的当前元素的时候mouseenter事件被触发，进入子元素时不再被触发，控制台显示打印了一次mouseenter。
在这里插入图片描述

补充

mouseover对应mouseout，mouseout鼠标离开被绑定元素或被绑定元素的子元素时都会触发该事件。
mouseenter对应mouseleave，mouseleave鼠标离开被绑定元素时才会触发该事件。

甜甜酷盖

关注

0
点赞
踩
2

收藏

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

区别举例补充区别mouseover:鼠标移入事件所绑定的元素或其子元素时，都会触发该事件。（具有冒泡特性）mouseenter:只有鼠标移入事件所绑定的元素时，才会触发该事件。（不具有冒泡特性）举例mouseover：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content.
复制链接

扫一扫