尧图网站建设 
文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本篇文章基于现代 JavaScript 教程The Modern JavaScript Tutorial中文仓库中的「工具提示行为」任务任务原文展开带你完整实现一个基于data-tooltip特性的声明式工具提示tooltip模块。你将掌握事件委托Event Delegation、mouseover/mouseout事件配对、getBoundingClientRect()坐标定位与窗口边缘越界处理等核心技能最终写出一个「不熟悉 JavaScript 的人也能直接给任意元素加注释」的通用行为模块。任务背景事件委托与行为模式在动手写代码之前先明确这个任务在教程体系中的位置。它位于「事件委托」章节的练习题部分对应章节正文article.md系统讲解了事件委托的思想当我们有许多以类似方式处理的元素时不必为每个元素分配处理程序而是把单个处理程序放在它们的共同祖先上在程序中通过event.target判断事件实际发生在哪里。该章节还提出了著名的**行为behavior模式**其结构分为两部分把自定义特性attribute添加到描述行为的元素上用文档范围级document-level的处理程序追踪事件如果事件发生在具有特定特性的元素上就执行对应行为。本章节已给出的行为示例包括data-action菜单按钮分发、data-counter点击自增和data-toggle-id点击切换显隐。本任务要实现的data-tooltip正是这一模式在「鼠标悬停」场景下的典型应用HTML 作者只需要在元素上写一个特性悬停提示功能即自动生效无需编写任何针对单个元素的脚本。任务需求拆解任务原文task.md给出的需求非常明确我们逐条落实当鼠标位于带有data-tooltip特性的元素上方时显示工具提示鼠标移开时隐藏工具提示的内容就是data-tooltip特性的值且可以是任意 HTML例如HTMLbrtooltip元素与工具提示之间的距离固定为5px工具提示应尽量相对于元素水平居中工具提示不能与窗口边缘交叉默认显示在元素上方但如果元素位于页面顶部、上方没有空间则改到元素下方显示一次只能显示一个工具提示必须使用事件委托只在document上设置mouseover和mouseout两个处理程序统一管理所有带data-tooltip的元素本任务假设带data-tooltip的元素内部只有文本尚无嵌套标签嵌套场景是后续进阶任务的内容。任务给出的示例 HTML 如下button>.tooltip { position: fixed; padding: 10px 20px; border: 1px solid #b3c9ce; border-radius: 4px; text-align: center; font: italic 14px/1.3 sans-serif; color: #333; background: #fff; box-shadow: 3px 3px 3px rgba(0, 0, 0, .3); }关键点是position: fixed。工具提示是动态创建并直接append到document.body的独立元素使用fixed定位使其坐标直接相对视口viewport计算恰好与后续getBoundingClientRect()返回的视口坐标系一致并且在页面滚动时仍能跟随固定位置。解决方案的body特意设置了height: 2000px使页面可滚动并在页面中加入提示文案Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.就是为了验证滚动后工具提示的定位依然正确。第二步mouseover 处理程序——创建并定位工具提示let tooltipElem; document.onmouseover function(event) { let target event.target; // 如果元素带有>document.onmouseout function(e) { if (tooltipElem) { tooltipElem.remove(); tooltipElem null; } };移出带注释元素时移除当前存在的工具提示节点并将tooltipElem置空。由于模块级变量tooltipElem始终只保存一个工具提示引用「一次只能显示一个工具提示」的需求天然得到满足——后一次悬停必然先经历上一次的mouseout清理或直接覆盖旧引用。一个值得注意的改进用 addEventListener 替换 onmouseover解决方案示例直接使用了document.onmouseover赋值。但教程在「行为计数器」一节article.md给出了明确的警告当我们将事件处理程序分配给document对象时我们应该始终使用addEventListener而不是document.onevent因为后者会引起冲突新的处理程序会覆盖旧的处理程序。在实际项目中在document上有许多由代码的不同部分设置的处理程序这是很正常的。因此在真实项目中推荐将解决方案改写为document.addEventListener(mouseover, function(event) { let target event.target; let tooltipHtml target.dataset.tooltip; if (!tooltipHtml) return; tooltipElem document.createElement(div); tooltipElem.className tooltip; tooltipElem.innerHTML tooltipHtml; document.body.append(tooltipElem); // ...定位逻辑与上节完全相同... }); document.addEventListener(mouseout, function(event) { if (tooltipElem) { tooltipElem.remove(); tooltipElem null; } });这样即使页面上其他脚本也在document上注册了事件处理程序本模块也不会覆盖它们多个行为behavior可以和平共存——这正是「行为」模式能成为可复用模块的关键保障。完整可运行示例将以下内容保存为 HTML 文件即可直接运行验证该结构即仓库中 solution.view/index.html 的完整形态!DOCTYPE HTML html head meta charsetutf-8 style body { height: 2000px; /* 让页面可滚动验证滚动后工具提示定位 */ } .tooltip { position: fixed; padding: 10px 20px; border: 1px solid #b3c9ce; border-radius: 4px; text-align: center; font: italic 14px/1.3 sans-serif; color: #333; background: #fff; box-shadow: 3px 3px 3px rgba(0, 0, 0, .3); } /style /head body pLaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa/p pLaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa/p button>赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐使用事件委托实现嵌套>使用事件委托实现嵌套 data tooltip 提示框Modern JavaScript Tutorial 实战解析 本指南基于 Modern JavaScr文档/教程前端Modern JavaScript Tutorial基于事件委托实现>Modern JavaScript Tutorial基于事件委托实现 data tooltip 行为式 Tooltip行为模式实战 导读 本篇文章围绕 J文档/教程前端事件委托实战用 30 行代码实现可排序表格zh.javascript.info 教程任务解析事件委托实战用 30 行代码实现可排序表格zh.javascript.info 教程任务解析 导读 本文基于《现代 JavaScript 教程》zh.j文档教程前端上一篇如何用Hermes Agent构建智能金融分析系统5步打造专业投资顾问下一篇Guitar Git GUI Client核心功能解析让Git操作可视化的10大亮点创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 JavaScript 事件委托实战：用 data-tooltip 特性实现可复用的工具提示行为（zh.javascript.info 教程任务解析）
文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本篇文章基于现代 JavaScript 教程The Modern JavaScript Tutorial中文仓库中的「工具提示行为」任务任务原文展开带你完整实现一个基于data-tooltip特性的声明式工具提示tooltip模块。你将掌握事件委托Event Delegation、mouseover/mouseout事件配对、getBoundingClientRect()坐标定位与窗口边缘越界处理等核心技能最终写出一个「不熟悉 JavaScript 的人也能直接给任意元素加注释」的通用行为模块。任务背景事件委托与行为模式在动手写代码之前先明确这个任务在教程体系中的位置。它位于「事件委托」章节的练习题部分对应章节正文article.md系统讲解了事件委托的思想当我们有许多以类似方式处理的元素时不必为每个元素分配处理程序而是把单个处理程序放在它们的共同祖先上在程序中通过event.target判断事件实际发生在哪里。该章节还提出了著名的**行为behavior模式**其结构分为两部分把自定义特性attribute添加到描述行为的元素上用文档范围级document-level的处理程序追踪事件如果事件发生在具有特定特性的元素上就执行对应行为。本章节已给出的行为示例包括data-action菜单按钮分发、data-counter点击自增和data-toggle-id点击切换显隐。本任务要实现的data-tooltip正是这一模式在「鼠标悬停」场景下的典型应用HTML 作者只需要在元素上写一个特性悬停提示功能即自动生效无需编写任何针对单个元素的脚本。任务需求拆解任务原文task.md给出的需求非常明确我们逐条落实当鼠标位于带有data-tooltip特性的元素上方时显示工具提示鼠标移开时隐藏工具提示的内容就是data-tooltip特性的值且可以是任意 HTML例如HTMLbrtooltip元素与工具提示之间的距离固定为5px工具提示应尽量相对于元素水平居中工具提示不能与窗口边缘交叉默认显示在元素上方但如果元素位于页面顶部、上方没有空间则改到元素下方显示一次只能显示一个工具提示必须使用事件委托只在document上设置mouseover和mouseout两个处理程序统一管理所有带data-tooltip的元素本任务假设带data-tooltip的元素内部只有文本尚无嵌套标签嵌套场景是后续进阶任务的内容。任务给出的示例 HTML 如下button>.tooltip { position: fixed; padding: 10px 20px; border: 1px solid #b3c9ce; border-radius: 4px; text-align: center; font: italic 14px/1.3 sans-serif; color: #333; background: #fff; box-shadow: 3px 3px 3px rgba(0, 0, 0, .3); }关键点是position: fixed。工具提示是动态创建并直接append到document.body的独立元素使用fixed定位使其坐标直接相对视口viewport计算恰好与后续getBoundingClientRect()返回的视口坐标系一致并且在页面滚动时仍能跟随固定位置。解决方案的body特意设置了height: 2000px使页面可滚动并在页面中加入提示文案Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.就是为了验证滚动后工具提示的定位依然正确。第二步mouseover 处理程序——创建并定位工具提示let tooltipElem; document.onmouseover function(event) { let target event.target; // 如果元素带有>document.onmouseout function(e) { if (tooltipElem) { tooltipElem.remove(); tooltipElem null; } };移出带注释元素时移除当前存在的工具提示节点并将tooltipElem置空。由于模块级变量tooltipElem始终只保存一个工具提示引用「一次只能显示一个工具提示」的需求天然得到满足——后一次悬停必然先经历上一次的mouseout清理或直接覆盖旧引用。一个值得注意的改进用 addEventListener 替换 onmouseover解决方案示例直接使用了document.onmouseover赋值。但教程在「行为计数器」一节article.md给出了明确的警告当我们将事件处理程序分配给document对象时我们应该始终使用addEventListener而不是document.onevent因为后者会引起冲突新的处理程序会覆盖旧的处理程序。在实际项目中在document上有许多由代码的不同部分设置的处理程序这是很正常的。因此在真实项目中推荐将解决方案改写为document.addEventListener(mouseover, function(event) { let target event.target; let tooltipHtml target.dataset.tooltip; if (!tooltipHtml) return; tooltipElem document.createElement(div); tooltipElem.className tooltip; tooltipElem.innerHTML tooltipHtml; document.body.append(tooltipElem); // ...定位逻辑与上节完全相同... }); document.addEventListener(mouseout, function(event) { if (tooltipElem) { tooltipElem.remove(); tooltipElem null; } });这样即使页面上其他脚本也在document上注册了事件处理程序本模块也不会覆盖它们多个行为behavior可以和平共存——这正是「行为」模式能成为可复用模块的关键保障。完整可运行示例将以下内容保存为 HTML 文件即可直接运行验证该结构即仓库中 solution.view/index.html 的完整形态!DOCTYPE HTML html head meta charsetutf-8 style body { height: 2000px; /* 让页面可滚动验证滚动后工具提示定位 */ } .tooltip { position: fixed; padding: 10px 20px; border: 1px solid #b3c9ce; border-radius: 4px; text-align: center; font: italic 14px/1.3 sans-serif; color: #333; background: #fff; box-shadow: 3px 3px 3px rgba(0, 0, 0, .3); } /style /head body pLaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa/p pLaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa/p button>赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐使用事件委托实现嵌套>使用事件委托实现嵌套 data tooltip 提示框Modern JavaScript Tutorial 实战解析 本指南基于 Modern JavaScr文档/教程前端Modern JavaScript Tutorial基于事件委托实现>Modern JavaScript Tutorial基于事件委托实现 data tooltip 行为式 Tooltip行为模式实战 导读 本篇文章围绕 J文档/教程前端事件委托实战用 30 行代码实现可排序表格zh.javascript.info 教程任务解析事件委托实战用 30 行代码实现可排序表格zh.javascript.info 教程任务解析 导读 本文基于《现代 JavaScript 教程》zh.j文档教程前端上一篇如何用Hermes Agent构建智能金融分析系统5步打造专业投资顾问下一篇Guitar Git GUI Client核心功能解析让Git操作可视化的10大亮点创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考