事件委托中el.dataset读不到值，是因为event.target常为子元素而非带data-*的父元素；应改用event.target.closest('[data-action]')获取目标元素后再读.dataset.action。
事件委托中 el.dataset 读不到值？先确认 event.target 是不是你想要的元素
常见错误是直接用 event.target.dataset.xxx，结果返回 undefined。这是因为 event.target 很可能是子元素（比如按钮里的 <svg>、<span> 或文字节点），它本身没挂 data-* 属性。
正确做法是向上找最近的、带目标属性的祖先元素：
- 用
event.target.closest("[data-action]")定位到有data-action的容器（如按钮本身） - 再读它的
.dataset.action，而不是event.target.dataset.action - 如果不确定属性名，可先
console.log(el.dataset)看实际解析出哪些键（注意：短横线命名自动转驼峰，data-page-section→el.dataset.pageSection）
data-* 命名不合法会导致 dataset 为空对象
data- 后面必须全小写、只含字母、数字和短横线（-），不能有下划线、大写字母或空格。例如：
- ✅ 合法：
data-track-id、data-val1、data-user-type - ❌ 非法：
data-trackId（驼峰）、data_val1（下划线）、data-user type（空格）——浏览器会忽略，dataset里压根不会出现对应字段
服务端渲染时若变量未做 HTML 属性转义（比如值含双引号），也会导致属性截断，最终 dataset 解析失败。
立即学习“前端免费学习笔记（深入）”；
change 事件委托中怎么安全取 select 的 data-* 值
<select> 自身支持 change，但它的 data-* 属性通常描述的是“这个下拉框代表什么”，而非选项内容。真正要传参的，往往是每个 <option> 上的 data-*。
- 监听
select的change，然后用e.target.selectedOptions[0].dataset拿选中项的自定义属性 - 如果
<select>外层容器（如<div class="filter-group">）挂了统一的data-context，就用e.target.closest(".filter-group").dataset.context - 避免在
<option>上写value和data-val1冗余数据；优先用data-*存结构化上下文，value仅作基础标识
表格行内操作：用 closest("tr") + dataset 提取整行上下文
表格里常需点击某单元格内的按钮，拿到整行其他列的数据。这时候不能只靠按钮上的 data-*，得结合 DOM 结构定位：
- 从
event.target出发，先.closest("tr")找到行 - 再用
row.querySelector('[data-row-id]').dataset.rowId取行级元数据 - 如果行内各列用
data-label标识语义（如<td data-label="hostname">web01</td>），可用row.querySelector('td[data-label="hostname"]').textContent提取值 - 注意：不要把大量 JSON 字符串塞进
data-*，既难维护又易触发 XSS —— 只存轻量标识，真实数据走 JS 对象映射或 API 查询
最易被忽略的一点：dataset 是只读代理对象，改它不会反写回 HTML 属性；需要动态更新时，必须用 el.setAttribute("data-xxx", "new")。
