事件委托实战：用 30 行代码实现可排序表格（zh.javascript.info 教程任务解析）-北京尧图网络

文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载导读本文基于《现代 JavaScript 教程》zh.javascript.info事件委托章节的可排序表格任务完整拆解如何只用一个挂在table上的点击处理程序让表格按任意列数字 / 字符串排序。你将从任务定义、源码实现到原理剖析掌握事件委托event delegation、event.target、dataset特性读取与Array.prototype.sort在真实 UI 场景中的组合用法并理解为什么容器一个监听器能替代每个表头一个监听器。任务背景它从属于事件委托章节本任务是 03-event-delegation 章节下编号为3-sortable-table的配套练习隶属于 2-ui 部分的事件板块2-events。同章节还有隐藏消息委托1-hide-message-delegate、滑动树2-sliding-tree、行为提示框4-behavior-tooltip等练习共同目的是把《事件委托》正文中的模式落到真实交互上。在正文中核心算法被概括为三步在容器container上放一个处理程序在处理程序中检查源元素event.target如果事件发生在我们感兴趣的元素内则处理该事件。本任务正是这一算法在表格排序上的典型应用容器是table感兴趣的元素是表头th处理动作是按该列重排行。任务定义点击表头按列排序完整任务原文见 task.md要求如下使表格可排序点击th元素时按对应列对表格排序每个th通过特性attribute声明列的类型例如data-typenumber与data-typestring排序函数必须依据类型进行排序数字列按数值大小字符串列按字典序只支持string和number两种类型表格可以有任意数量的行和列示例中为 5 行 2 列。任务给出的起始 HTML 结构与 source.view/index.html 一致table idgrid thead tr th>grid.onclick function(e) { if (e.target.tagName ! TH) return; let th e.target; // cellIndex 是 th 的序号 // 0 代表第一列 // 1 代表第二列以此类推 sortGrid(th.cellIndex, th.dataset.type); }; function sortGrid(colNum, type) { let tbody grid.querySelector(tbody); let rowsArray Array.from(tbody.rows); // compare(a, b) 比较两行供排序使用 let compare; switch (type) { case number: compare function(rowA, rowB) { return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML; }; break; case string: compare function(rowA, rowB) { return rowA.cells[colNum].innerHTML rowB.cells[colNum].innerHTML ? 1 : -1; }; break; } // 排序 rowsArray.sort(compare); tbody.append(...rowsArray); }配套的表格 HTML5 行 2 列Age 为数字、Name 为字符串table idgrid thead tr th>grid.onclick function(e) { if (e.target.tagName ! TH) return; ... };监听器挂在table idgrid上点击表格内任意位置包括td内的文本、表头都会因事件冒泡到达这里e.target是实际被点击的最深层元素。只有当它确实是th时才继续——这是正文中if (target.tagName ! TD) return;模式的直接复刻因为th内部没有嵌套子元素示例中表头只有纯文本所以这里直接判断tagName即可无需像正文示例那样使用closest(td)向上查找。若日后表头里放进图标、span等嵌套元素则应改用th.closest(th)并配合grid.contains(th)校验规避正文中提到的嵌套表格穿透问题。第 2 步读取列号与类型let th e.target; sortGrid(th.cellIndex, th.dataset.type);th.cellIndexth元素自带的行内序号属性0 表示第一列、1 表示第二列……无需自己遍历children数位置这是实现任意列通用排序的关键th.dataset.typeHTML 中data-typenumber特性会通过dataset自动映射为th.dataset.typedata-*转驼峰命名一行代码拿到列类型。第 3 步按类型构造比较器switch (type) { case number: compare function(rowA, rowB) { return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML; }; break; case string: compare function(rowA, rowB) { return rowA.cells[colNum].innerHTML rowB.cells[colNum].innerHTML ? 1 : -1; }; break; }数字列innerHTML会被-运算符隐式转为数字a - b返回负数 / 零 / 正数正好满足Array.prototype.sort对比较函数返回负值则 a 在前的约定保证按数值升序字符串列用直接比较字符串按 Unicode 字典序返回1或-1相等时无碍因为示例数据没有重复名为什么不直接对单元格文本排序这里比较的是整行rowA/rowB通过rowA.cells[colNum]取出目标列的单元格——排序后行整体移动各列数据始终对齐不会出现只排了一列、其他列错位的经典 bug。第 4 步排序并写回 DOMlet rowsArray Array.from(tbody.rows); rowsArray.sort(compare); tbody.append(...rowsArray);tbody.rows是 HTMLCollection类数组必须先Array.from转成真数组才能调用sortappend(...rowsArray)把排序后的行一次性追加回tbodyDOM 中已经存在的元素被重新 append 时会自动从原位置移动到新位置因此无需先remove再插入排序只涉及 5 个tr的 DOM 重排开销极小且天然支持任意行数。为什么事件委托在这里是正确选择对照正文总结的收益清单本任务逐条印证简化初始化并节省内存若表格有 50 列常规写法需要 50 个onclick处理程序委托写法始终只有 1 个grid.onclick与列数无关更少的代码DOM 修改友好后续用innerHTML批量增删行、甚至动态增删th监听器依然有效无需重新绑定数据与行为分离data-type特性让列的类型成为标记的一部分排序引擎对列内容无感知扩展新列只需写一个th>赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐en.javascript.info 事件委托实战手写一个点击表头即可排序的可排序 HTML 表格en.javascript.info 事件委托实战手写一个点击表头即可排序的可排序 HTML 表格本篇指南围绕 Modern JavaScript Tuto文档/教程前端JavaScript 事件委托实战基于事件委托实现可折叠树形菜单Sliding TreeJavaScript 事件委托实战基于事件委托实现可折叠树形菜单Sliding Tree 事件委托Event Delegation是 DOM 事件处理文档/教程前端表格单元格点击编辑实战用事件委托与 focus 构建可编辑表格单元格表格单元格点击编辑实战用事件委托与 focus 构建可编辑表格单元格导读本文基于 Modern JavaScript Tutorial本仓库 2 ui/文档/教程前端上一篇Clair v4 HTTP API v1 实战指南OpenAPI 规范、端点与客户端接入下一篇从游戏卡顿到流畅体验DLSS Swapper如何帮你掌控图形技术升级创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

事件委托实战：用 30 行代码实现可排序表格（zh.javascript.info 教程任务解析）

相关推荐

Midway 标签组件 @midwayjs/tags 使用指南：从内存到 MySQL 的通用标签系统实战

k0s 节点重装指南：通过 k0sctl 迁移 containerd data-dir 并将节点重新接入集群

AlgoNote 算法通关手册：LeetCode 343 整数拆分——动态规划五步法经典题解

更多资讯

PHP网站被入侵后如何溯源：日志分析、WebShell排查与攻击链还原实战

扫地机器人拆解实战：鱼拆法与精密结构逆向指南

Java面试复盘：内容社区微服务架构、缓存策略与AI集成全链路设计

网络信息分辨与防毒意识：构建数字安全认知防线

FPGA DMA IP核实战指南：AXI DMA/CDMA/VDMA选型与调优

H3C S6520现网IRF堆叠不断网配置：规划、合并与避坑指南

今日更新

Agent Skills 完全指南：原理、写法、安装与实战避坑

Agent Skills 实战：从 Genkit 定义到 GKE 部署与排查

Agent Skills 实战：从设计到调试的完整指南

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？