data-action 是标记按钮操作意图的事实标准，值须为小写、数字、短横线组合，应与 data-id 等协同使用，事件委托时通过 e.target.closest('button[data-action]') 安全读取。
data-action 是最常用的操作类型标识方式
给按钮加 data-action 属性，是标记“这个按钮要干什么”的事实标准。它不执行任何逻辑，只是把意图明文写进 HTML，后续 JS 读取后决定怎么处理。
常见错误是写成 data-type="delete" 或 data-op="ban" ——虽然能用，但 data-action 更通用、更易被团队或框架识别（比如前端路由、权限系统常默认检查这个字段）。
- 值必须是小写字母、数字、短横线组合，不能含空格或下划线：
data-action="user-delete"✅，data-action="delete user"❌ - 避免语义模糊：
data-action="go"不如data-action="navigate-to-dashboard"清晰 - 服务端渲染时直接写死，别靠 JS 动态塞——否则首屏按钮可能没行为
dataset.action 读取时自动转驼峰，但要注意大小写规则
dataset API 会把带短横线的属性名转成驼峰格式，比如 data-action-type → dataset.actionType，但 data-action 就是 dataset.action，不会变成 dataset.Action 或 dataset.ACTION。
容易踩的坑是误以为 data-user-id 对应 dataset.userId ——其实它对应的是 dataset.userId（连字符后首字母自动大写），而 data-uid 才对应 dataset.uid。
-
<button data-action="edit"></button>→btn.dataset.action === "edit" -
<button data-action-type="soft-delete"></button>→btn.dataset.actionType === "soft-delete" -
dataset返回的永远是字符串，if (btn.dataset.action)判空没问题，但if (btn.dataset.action === true)永远为 false
多个 data-* 属性协同传递上下文，别只靠一个
单靠 data-action 往往不够。删除用户需要 ID，封禁还要带理由类型，导出得知道格式。这时得搭配其他 data- 属性一起用：
<button data-action="delete" data-id="123" data-confirm="确定删除该用户？">删</button><button data-action="export" data-format="csv" data-scope="current-page">导出 CSV</button>- 所有值都应在服务端或初始化 JS 中一次性写入，避免运行时遍历 DOM 取文本（表格里
row.cells[0].textContent极不可靠） - 不要用
data-action存复杂结构，比如data-action='{"type":"batch","ids":[1,2,3]}'——JSON 字符串难调试，也违反 data-* 的轻量定位
事件委托时从 event.target 读 dataset 最安全
大量按钮统一绑定时，用事件委托 + event.target.dataset.action 是唯一靠谱做法。直接给每个按钮绑 addEventListener 在 512 个按钮场景下性能差、内存占用高、难以维护。
关键点：必须用 event.target，不是 event.currentTarget；按钮若套了 span 或图标，点击图标时 event.target 是子元素，需用 event.target.closest('button') 向上找。
- 错误写法：
btn.addEventListener('click', () => console.log(btn.dataset.action))——闭包捕获的是循环末尾的 btn - 正确写法：
document.body.addEventListener('click', e => { const btn = e.target.closest('button[data-action]'); if (btn) console.log(btn.dataset.action); }) - IE11 不支持
dataset，真要兼容得降级用getAttribute('data-action')，且注意返回 null 而不是 undefined
真正难的不是怎么写 data-action，而是每次加新按钮时，是否同步更新了 JS 里的 switch 分支、权限校验逻辑、以及后端 API 的参数映射。这些地方漏掉一个，按钮就变成“看起来能点，点了没反应”或“点错了干了别的事”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
