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

文章目录

一、核心要点解析 - 鼠标经过高亮显示
- 1、案例需求
- 2、获取高亮显示的列表行
- 3、鼠标经过 onmouseover 事件设置
- 4、鼠标离开 onmouseout 事件设置
- 5、设置高亮方式
二、完整代码示例
- 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. 鼠标经过事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[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. 鼠标经过事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script>
</body></html>