【Web APIs】JavaScript 操作多个元素 ③ ( 鼠标经过高亮显示 | onmouseover 事件设置 | onmouseout 事件设置 )

韩曙亮

于 2025-04-16 22:52:17 发布

阅读量855

点赞数 9

分类专栏： JavaScript 文章标签：前端 javascript Web APIs onmouseout onmouseover Element

本文链接：https://blog.csdn.net/shulianghan/article/details/144754057

版权

JavaScript 专栏收录该内容

93 篇文章

订阅专栏

文章目录

一、核心要点解析 - 鼠标经过高亮显示
二、完整代码示例
- 1、完整代码示例
- 2、执行结果

一、核心要点解析 - 鼠标经过高亮显示

1、案例需求

案例需求 : 给出一个学生列表 , 鼠标经过列表 , 对应的列表行高亮显示 , 鼠标离开列表行 , 背景高亮效果取消 ;

效果如下图所示 :

在这里插入图片描述

实现思路 :

鼠标经过状态可以通过设置标签元素的 onmouseover 触发事件设置 ;
鼠标离开状态可以通过设置比钱元素的 onmouseout 触发事件设置 ;
鼠标经过 table 表格的 tr 行标签时 , 设置高亮背景颜色 , 鼠标离开时设置默认颜色 ;

2、获取高亮显示的列表行

列表的 HTML 架构如下 :

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>18</td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Trump</td>
                <td>74</td>
            </tr>
        </tbody>
    </table>

要改变背景的列表行在 <tbody> 标签下的 <tr> 标签中 ;

注意 : 不要选中 <thead> 标签下的 <tr> 标签 ;

在 JavaScript 中调用 document.querySelector('tbody') 代码获取 <tbody> 标签元素 , 然后在 <tbody> 标签元素上调用 querySelectorAll('tr') 代码 , 获取 <tbody> 标签下的多个 <tr> 标签 ;

代码如下 :

var trs = document.querySelector('tbody').querySelectorAll('tr');

3、鼠标经过 onmouseover 事件设置

Element.onmouseover 事件在鼠标指针首次移动到某个元素或其子元素上方时触发 , 常用于实现悬停效果 , 如 : 高亮、提示框等效果 ;

直接在 HTML 标签中 , 使用 HTML 内联属性定义 :

<img onmouseover="bigImg(this)" src="smiley.gif" alt="图片">

在 JavaScript 代码中 , 通过 addEventListener 方式设置事件监听器 , 推荐使用这种方式设置 , addEventListener 支持多个监听器 , 而 mouseover 属性赋值会覆盖已有处理器 ;

// addEventListener 方式（推荐）
element.addEventListener('mouseover', function(event) {
  this.style.backgroundColor = 'red';
});

属性赋值方式 , 直接对标签元素的 onmouseover 属性进行赋值 , 这种方式会覆盖已有处理器 ;

// 属性赋值方式
element.onmouseover = function() { 
  // 处理逻辑
};

4、鼠标离开 onmouseout 事件设置

Element.onmouseout 事件在鼠标指针移出元素或其子元素的边界时触发 , 常用于悬停交互后的状态恢复 , 如 : 隐藏提示框、恢复默认样式等 ;

当鼠标从目标元素或子元素移动到其他区域时触发 , 若元素包含子元素 , 鼠标在父元素与子元素之间移动时可能多次触发该事件 ;

直接在 HTML 标签中 , 使用 HTML 内联属性定义 :

<img onmouseout="resetStyle(this)" src="image.jpg" alt="示例">

在 JavaScript 代码中 , 通过 addEventListener 方式设置事件监听器 , 推荐使用这种方式设置 , addEventListener 支持多个监听器 , 而 mouseout 属性赋值会覆盖已有处理器 ;

// addEventListener 方式（推荐）
element.addEventListener("mouseout", handlerFunction);

属性赋值方式 , 直接对标签元素的 onmouseout 属性进行赋值 , 这种方式会覆盖已有处理器 ;

element.onmouseout = function(event) { 
  // 恢复元素样式或执行其他操作
};

5、设置高亮方式

设置一个 css 样式 , .bg 类选择器 , 当鼠标经过表格行时 , 为该行设置 bg 类名 , 鼠标移开时取消 bg 类名 ;

        .bg {
            background-color: pink;
        }

循环设置表格中的 tr 行标签元素的鼠标经过和离开的样式 :

        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }

二、完整代码示例

1、完整代码示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Example</title>
    <style>
        * {
            /* 取消默认内外边距样式 */
            margin: 0;
            padding: 0;
        }
        
        table {
            width: 400px;
            margin: 50px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>18</td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Trump</td>
                <td>74</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>