鼠标事件-mouseover和mouseout-鼠标悬停与离开事件-前端-Javascript-书闪BookChips

119 - 鼠标事件 - mouseover 和 mouseout - 鼠标悬停与离开事件

作者：

贺及楼

成为作者

更新日期：2025-02-21 19:56:17

鼠标事件 - mouseover 和 mouseout - 鼠标悬停与离开事件

在前端开发中，与用户的交互是至关重要的。鼠标事件是实现交互效果的重要组成部分，其中 mouseover 和 mouseout 事件在处理鼠标悬停与离开的场景中扮演着关键角色。本文将深入探讨这两个事件的使用方法、特性以及实际应用。

1. `mouseover` 和 `mouseout` 事件概述

1.1 `mouseover` 事件

mouseover 事件会在鼠标指针移动到一个元素或其子元素上时触发。也就是说，当鼠标从元素外部进入该元素或者其内部的子元素时，mouseover 事件就会被触发。

1.2 `mouseout` 事件

mouseout 事件则相反，它会在鼠标指针从一个元素或其子元素移出时触发。即当鼠标从元素内部移动到元素外部时，mouseout 事件会被触发。

2. 基本语法与示例

2.1 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouseover and Mouseout Example</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="box">Hover me!</div>
    <script src="script.js"></script>
</body>
</html>

2.2 JavaScript 代码（script.js）

const box = document.getElementById('box');
box.addEventListener('mouseover', function () {
    box.style.backgroundColor = 'lightgreen';
});
box.addEventListener('mouseout', function () {
    box.style.backgroundColor = 'lightblue';
});

在这个示例中，当鼠标悬停在 div 元素上时，它的背景颜色会变成浅绿色；当鼠标离开该元素时，背景颜色会恢复为浅蓝色。

3. 事件冒泡与捕获

mouseover 和 mouseout 事件会受到事件冒泡和捕获机制的影响。事件冒泡是指事件从最内层的元素开始，逐渐向外层元素传播；而事件捕获则是从最外层元素开始，向内层元素传播。

3.1 事件冒泡示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Bubbling Example</title>
    <style>
        #outer {
            width: 300px;
            height: 300px;
            background-color: lightcoral;
            padding: 50px;
        }
        #inner {
            width: 200px;
            height: 200px;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <script>
        const outer = document.getElementById('outer');
        const inner = document.getElementById('inner');
        outer.addEventListener('mouseover', function () {
            console.log('Mouse over outer');
        });
        inner.addEventListener('mouseover', function () {
            console.log('Mouse over inner');
        });
    </script>
</body>
</html>

当鼠标从外部进入内层元素时，会先触发 inner 元素的 mouseover 事件，然后再触发 outer 元素的 mouseover 事件，这就是事件冒泡的体现。

4. 实际应用场景

4.1 导航菜单的显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu Example</title>
    <style>
        nav {
            background-color: #333;
            color: white;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        nav li {
            position: relative;
            padding: 15px;
        }
        nav ul ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #444;
        }
        nav li:hover ul {
            display: block;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Home</li>
            <li>
                Products
                <ul>
                    <li>Product 1</li>
                    <li>Product 2</li>
                </ul>
            </li>
            <li>Contact</li>
        </ul>
    </nav>
    <script>
        const menuItems = document.querySelectorAll('nav li');
        menuItems.forEach(item => {
            item.addEventListener('mouseover', function () {
                const subMenu = this.querySelector('ul');
                if (subMenu) {
                    subMenu.style.display = 'block';
                }
            });
            item.addEventListener('mouseout', function () {
                const subMenu = this.querySelector('ul');
                if (subMenu) {
                    subMenu.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>

在这个示例中，当鼠标悬停在包含子菜单的菜单项上时，子菜单会显示出来；当鼠标离开该菜单项时，子菜单会隐藏起来。

5. `mouseover` 和 `mouseout` 与 `mouseenter` 和 `mouseleave` 的对比

事件名称	触发条件	事件冒泡
`mouseover`	鼠标进入元素或其子元素	是
`mouseout`	鼠标离开元素或其子元素	是
`mouseenter`	鼠标进入元素（不考虑子元素）	否
`mouseleave`	鼠标离开元素（不考虑子元素）	否

如果需要避免事件冒泡带来的影响，可以考虑使用 mouseenter 和 mouseleave 事件。

6. 总结

mouseover 和 mouseout 事件是前端开发中处理鼠标悬停与离开交互的重要工具。通过合理使用这两个事件，可以实现丰富多样的交互效果，如菜单显示隐藏、元素样式切换等。同时，要注意事件冒泡对这两个事件的影响，根据具体需求选择合适的事件处理方式。在实际开发中，结合 CSS 和 JavaScript 的优势，能够创造出更加出色的用户体验。