mouseover与mouseout的差异与联系

最新推荐文章于 2025-05-14 14:39:29 发布

原创最新推荐文章于 2025-05-14 14:39:29 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mouseout #mouseover #差异 #事件管理

精进的前端专栏收录该内容

26 篇文章

订阅专栏

本文详细解析了mouseover与mouseout这两个鼠标事件的区别及联系，并通过实例演示了它们在不同节点间切换时的触发顺序。此外，还提供了一段测试代码帮助读者更好地理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 差异

mouseover与mouseout的差异主要在进入节点与节点时，在节点内的子孙节点切换时不属于这种情况。

进入节点时：
1. 必然会触发mouseover，类似于jquery实现的事件类型“mouseenter”

离开节点时：
1. 必然会触发mouseout，不会触发mouseover，类似于jquery实现的事件类型“mouseleave”

2. 联系

在节点内部切换时，例如从节点自身切换到儿子节点，或者从儿子切换到孙子节点，那么一定会先触发mouseout事件，然后触发mouseover事件。

下面举例来进行说明，假定操作的序列为：进入节点->进入子节点->进入孙子节点->进入子节点->进入节点->离开节点，那么事件的触发的事件顺序如下：

## 进入节点时触发
mouseover
## 进入子节点时触发
mouseout
mouseover
## 进入孙子节点时触发
mouseout
mouseover
## 离开孙子节点时触发
mouseout
mouseover
##  离开子节点时触发
mouseout
mouseover
#   离开节点时触发
mouseout

从上面的例子可以看出，在节点内部移动鼠标，只要发生节点切换，那么一定会先触发mouseout，再触发mouseleave。

3. 测试代码

<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container {
                width : 200px;
                height : 200px;
                border : 1px solid blue;
            }

            .child {
                width : 100px;
                height : 100px;
                margin : 50px 0 0 50px;
                border : 1px solid green;
            }

            .child > .child {
                width : 50px;
                height : 50px;
                margin : 25px 0 0 25px;
                border : 1px solid green;
            }
        </style>
    </head>
    <body>
        <div class="container">

            <div class="child">
                <div class="child">

                </div>
            </div>

        </div>
        <script type="text/javascript">
            var c = document.querySelector('.container'),
                counter = 1,
                s = document.querySelector('.child')
            c.addEventListener('mouseover', function() {
                console.log('%c over %d', 'color : blue;font-size : 20px;', counter++)
            })
            c.addEventListener('mouseout', function() {
                console.log('%c mouseout %d', 'color : blue;font-size : 20px;', counter)
            })
        </script>
    </body>
</html>