data-*属性必须以data-开头、全小写加短横线命名（如data-user-id），禁用大写、下划线或驼峰；值恒为字符串，需手动类型转换；修改须用setAttribute，dataset仅用于读取。
data-* 属性怎么写才合法
必须以 data- 开头，后面只能跟小写字母、数字、短横线（-），不能有大写字母或下划线。比如 data-user-id 合法，data-userId 或 data_user_id 会被浏览器忽略。
值必须是字符串——哪怕你写 data-count="42" 或 data-active="true"，读出来仍是字符串，不会自动转成数字或布尔值。
常见错误：
- 在
data-后直接拼 JSON 字符串，如data-payload='{"id":1,"type":"save"}'：引号易冲突、解析易出错、无法被dataset安全读取 - 用非标准命名，如
dataItem或data_item：浏览器不识别，element.dataset.item返回undefined - 把敏感数据（如 token、用户 ID）明文塞进
data-：这些属性在 DOM 中完全可见，等同于暴露在源码里
点击时怎么安全读取 data 参数
优先用 e.currentTarget.dataset，而不是 e.target.dataset 或 getAttribute()。
e.currentTarget 指绑定事件的元素本身，不管用户点的是按钮文字还是图标子节点，都能稳定拿到父容器上的 data- 值；而 e.target 可能是子元素，没有你设的属性。
dataset 自动把连字符转为驼峰（data-action-type → dataset.actionType），比 getAttribute('data-action-type') 更简洁，且兼容性好（IE11+）。
示例：
<button data-action="delete" data-id="1024" data-confirm="true">删</button>
<script>
document.addEventListener('click', function(e) {
const btn = e.currentTarget.closest('button[data-action]');
if (!btn) return;
const { action, id, confirm } = btn.dataset;
// action === 'delete', id === '1024', confirm === 'true'（注意仍是字符串）
});
</script>
多个按钮共用一个事件函数时怎么区分
核心是别在每个按钮上单独写 onclick="handleClick('xxx')"，那样维护成本高、无法动态生成、还容易 XSS（如果参数来自后端未转义）。
正确做法是统一委托 + closest() 匹配：
- 给所有目标按钮加统一标识，比如都带
data-track-id - 在父容器或
document上监听一次click，用e.target.closest('[data-track-id]')找到被点的按钮 - 提取它的全部
dataset，构造上下文参数传给分析 SDK 或业务逻辑
这样新增按钮只需加 HTML 属性，不用改 JS；也避免了 querySelectorAll().forEach() 绑定大量重复监听器。
React/Vue/小程序里要注意什么
在 React 中，data- 属性可以直接写在 JSX 里：<button data-id="{item.id}" data-type="user"></button>，事件中仍用 e.currentTarget.dataset.id 读取。
Vue 模板同理，但注意不要和 v-bind: 混淆——:data-id="item.id" 是合法的，但 v-data-id 不是 Vue 指令，会报错。
微信小程序中，bindtap 触发的 e 对象里，e.currentTarget.dataset 是标准用法；e.target.dataset 在嵌套结构下可能为空，务必用 currentTarget。
所有框架下都禁止把对象直接塞进 data-：想传复杂结构，先 JSON.stringify() 再存，读取时再 JSON.parse()，但要加 try/catch 防止格式错误崩溃。
真正容易被忽略的点是：dataset 的键名转换规则只作用于 -，不处理数字开头或连续多个 -；比如 data-1st-item → dataset.1stItem 会语法错误，得写成 dataset['1st-item']。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
