data-*属性需全小写短横线命名，读取用dataset需注意大小写转换规则；event.target可能非目标元素，应使用closest()或委托父级事件；dataset返回字符串且不解析JSON，状态变更不触发响应式更新。
直接用 data-* 做 HTML 与 JS 交互，不是不行，但多数人栽在命名、读取时机和数据类型上——它不自动解析 JSON，不处理大小写，也不保证事件目标是你想的那个元素。
data-* 属性名怎么写才不会被 dataset 忽略
HTML 中的 data- 名必须全小写、用短横线分隔，否则 dataset 读不到或转错：
-
data-user-id→ 可读为element.dataset.userId -
data-userId或data-UserID→dataset.userId是undefined（浏览器可能全转小写，但行为不一致） -
data_user_id→dataset完全不识别，必须用getAttribute('data_user_id') -
data-reg-time→ 对应dataset.regTime，不是dataset.reg-time（语法错误）
event.target.dataset.xxx 为什么经常是 undefined
点击按钮里的图标、文字或 span，event.target 很可能是子元素，它没挂 data-action ——不是 JS 读错了，是找错对象了：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 别写
event.target.dataset.action，改用event.target.closest('[data-action]') - 如果父容器固定（比如整个
<li>都可点），把事件监听器直接绑在父级，避免每次触发都closest - 高频操作（如拖拽中反复获取）务必提前缓存目标元素，别在回调里重复查 DOM
dataset 和 getAttribute('data-xxx') 到底该用哪个
二者返回值类型相同（都是字符串），但行为差异明显，选错会导致静默失败：
立即学习“前端免费学习笔记（深入）”；
- 要用驼峰读取、且属性名规范（全小写+短横线）→ 优先用
dataset，写法简洁 - 需要原始字符串（含空格、换行、前导零）→ 必须用
getAttribute('data-xxx')，dataset会自动 trim - 属性名含大写字母、下划线、或服务端模板生成时不可控 → 绕过
dataset，直用getAttribute -
data-config='{"theme":"dark"}'→dataset.config拿到的是字符串，不是对象；没人帮你JSON.parse，出错也不会报错
真正容易被忽略的是：data-* 是“只读通道”，不是状态管理。你改了 dataset.foo = 'bar'，DOM 属性确实更新了，但 JS 里其他地方引用的变量、Vue/React 的响应式数据、或者 Map 缓存里的值，全都不会同步——它只管存，不管联动。
