简单了解mouseover与mouseenter的使用场景

Try Tomato

于 2022-04-17 15:12:21 发布

阅读量947

点赞数 1

分类专栏： # + 浏览器 DOM 文章标签： javascript JS 鼠标事件 mouseenter 冒泡原理

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124229493

版权

+ 浏览器 DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

我们知道鼠标经过和离开的事件有俩种：

mouseenter与mouseover，那么这里俩个事件有什么区别呢？

mouseenter：给谁注册的事件，就必须经过谁，才能触发该事件

简单来说mouseenter不能冒泡，也就是说经过其子盒子，不会触发它的事件

而mouseover刚好相反，因为mouseover会冒泡。所以当你经过它的子盒子它也会触发相应事件：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        position: relative;
        margin-top: 50px;
        margin-left: 50px;
        width: 300px;
        height: 300px;
        background-color: aquamarine;
    }
    a{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: block;
        width: 100px;
        height: 100px;
        border: 5px solid #000;
        padding: 5px;
        background-color: brown;
    }
    em{
        position: absolute;
        top: 5000px;
    }
</style>
<body>
    <div><a href="javascript:;">son</a>father</div>
</body>
<script>
const div = document.querySelector('div')
const a = document.querySelector('a')
div.addEventListener('mouseover',function(){
    console.log('触发了div');
    this.style.backgroundColor = 'blue'
})
</script>

当鼠标经过son时，必然会先经过father，经过father触发了一次，经过son因为冒泡原理又触发了一次father：

如果我们使用mouseenter呢？
const div = document.querySelector('div')
const a = document.querySelector('a')
div.addEventListener('mouseenter',function(){
    console.log('触发了div');
    this.style.backgroundColor = 'blue'
})
当鼠标经过son时，必然会先经过father，经过father触发了一次，经过son之后，因为mouseenter不能冒泡，所以没有触发father：

我们可以根据实际情况来判断到底使用哪种鼠标经过事件

mouseenter --> 鼠标经过（不冒泡）	mouseleave -->鼠标离开（不冒泡）
mouseover -->鼠标经过（冒泡）	mouseout -->鼠标离开（冒泡）

Try Tomato

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单了解mouseover与mouseenter的使用场景

我们知道鼠标经过和离开的事件有俩种：mouseenter与mouseover，那么这里俩个事件有什么区别呢？mouseenter：给谁注册的事件，就必须经过谁，才能触发该事件简单来说mouseenter不能冒泡，也就是说经过其子盒子，不会触发它的事件而mouseover刚好相反，因为mouseover会冒泡。所以当你经过它的子盒子它也会触发相应事件：<style> *{ margin: 0; padding: 0; }
复制链接

扫一扫