最稳妥做法是在删除按钮上用 data-id 存 id，通过 event.target.dataset.id 获取字符串 id 并手动转换类型；需用 closest() 确保取到按钮本身，避免子元素干扰；框架中优先用绑定参数而非 dataset。
删除按钮点击时如何拿到对应行的ID
直接在按钮上用 data-id 存 ID 是最稳妥的做法，避免依赖 DOM 层级或索引。浏览器原生支持 dataset，不用额外库也能取值。
- HTML 中写成
<button data-id="123">删除</button>，注意data-前缀和小写连字符命名 - JS 里用
event.target.dataset.id拿到字符串"123"，不是数字，需要parseInt()或Number()转换 - 如果 ID 含字母或短横线（比如
user-abc），dataset会自动转成驼峰（event.target.dataset.userAbc），别硬写user-abc - 别用
getAttribute('data-id')—— 虽然能用，但绕过 dataset API 失去大小写转换和类型隐式处理优势
dataset 传复杂值（如 JSON）容易出错吗
可以传，但不推荐。dataset 只接受字符串，JSON 必须先 JSON.stringify() 再塞进 data-xxx，取的时候再 JSON.parse()，稍有不慎就抛 SyntaxError。
- 常见错误：后端模板直接吐 JSON 到属性里，没做 HTML 实体转义，导致引号冲突或标签截断
- 更安全的做法是只传简单标识符（ID、slug、type），真正需要的数据走 API 查，或存在全局 JS 对象里按 ID 查
- 如果真要传对象，务必用
encodeURIComponent(JSON.stringify(obj))编码，取的时候decodeURIComponent()+JSON.parse()
事件委托下 dataset 怎么准确取到目标按钮的 ID
用 event.target 直接取可能出错——比如按钮里套了图标或文字，实际点击的是子元素。必须确保取的是按钮本身。
- 加一层判断：
const btn = event.target.closest('button[data-id]');，再取btn.dataset.id - 不要用
event.currentTarget，它指向绑定事件的父容器，dataset 不一定在它身上 - 如果委托到
<tbody>，而按钮在 <code><td> 里，<code>closest()能跨层级找到最近的匹配按钮 - IE 不支持
closest()，需 polyfill 或改用循环parentNode判断 - 只有在需要纯 HTML + 原生 JS 驱动的场景（比如后端模板直出表格）才用 dataset
- 框架组件中若混用原生事件监听，记得检查是否触发了两次（框架事件 + 原生事件），ID 可能被重复提交
- 服务端渲染（SSR）页面首次加载时，dataset 是唯一能带初始数据的方式，此时必须用
Vue/React 里还该不该手动用 dataset 传 ID
框架内通常不需要。Vue 的 @click="del(row.id)"、React 的 onClick={() => del(item.id)} 更直接，dataset 反而增加冗余和维护成本。
dataset.id 拿到的是字符串，后端接口往往要 number 类型，漏了转换就 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
