【Web APIs】鼠标经过、离开事件 ( mouseover、mouseout 事件

文章目录

一、鼠标经过、离开事件
- [1、mouseover、mouseout 事件](#1、mouseover、mouseout 事件)
- [2、mouseenter、mouseleave 事件](#2、mouseenter、mouseleave 事件)
二、代码示例
- [1、代码示例 - mouseenter、mouseleave 事件](#1、代码示例 - mouseenter、mouseleave 事件)
- [2、代码示例 - mouseover、mouseout 事件](#2、代码示例 - mouseover、mouseout 事件)

一、鼠标经过、离开事件

1、mouseover、mouseout 事件

mouseover 事件 : 鼠标指针从元素外部移入元素本身 , 或从元素本身移入其子元素时触发 , 支持事件冒泡 ;

mouseout 事件 : 鼠标指针从元素本身移出到外部 , 或从元素子元素移出到本身时触发 , 支持事件冒泡 ;

鼠标在元素和其子元素间移动会频繁触发 mouseover、mouseout 事件 ;

2、mouseenter、mouseleave 事件

mouseenter 事件 : 鼠标指针仅从外部移入元素本身时触发 , 不支持事件冒泡 , 子元素的鼠标移动不会触发父元素的该事件 ;

mouseleave 事件 : 鼠标指针仅从元素本身移出到外部时触发 , 不支持事件冒泡 , 从子元素移回父元素不会触发 ;

mouseenter、mouseleave 事件只关注元素自身的鼠标进出 , 触发更精准、频率更低 ;

二、代码示例

1、代码示例 - mouseenter、mouseleave 事件

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标经过、离开事件</title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 父容器元素 : 包含子元素son，形成DOM父子层级关系 -->
    <div class="father">
        <!-- 子元素 : 嵌套在father容器内部 -->
        <div class="son"></div>
    </div>

    <script>
        // 1. 获取页面中第一个类名为 "father" 的 DOM 元素 ( 父元素 ) 
        var father = document.querySelector('.father');
        // 2. 获取页面中第一个类名为 "son" 的 DOM 元素 ( 子元素 ) 
        var son = document.querySelector('.son');

        // 3. 为父元素绑定 mouseenter 事件 ( 不冒泡事件 ) 
        // mouseenter 特性 : 仅鼠标从外部移入 father 自身区域时触发，移入子元素不会触发
        father.addEventListener('mouseenter', function() {
            // 事件触发时，在浏览器控制台打印指定文字
            console.log('father mouseenter');
        });

        // 4. 为子元素绑定 mouseleave 事件 ( 不冒泡事件 ) 
        // mouseleave特性 : 仅鼠标从son自身区域移出到外部时触发 ( 移到father区域也算 ) 
        father.addEventListener('mouseleave', function() {
            // 【修正错误】原代码写的是son.log()，DOM元素无log方法，需用console.log
            console.log('father mouseleave');
        });
    </script>
</body>

</html>

执行结果 : mouseenter、mouseleave 事件只关注元素自身的鼠标进出 , 触发更精准、频率更低 ; 进出子元素不会触发 ;

2、代码示例 - mouseover、mouseout 事件