最稳方式是onclick="handleClick(this)"，函数内用getAttribute读取data-id；避免直接在onclick中写dataset或未引号变量，非标准命名data属性必须用getAttribute获取。
onclick 里怎么安全传 data-id 而不拼字符串
直接在 onclick 属性里写 onclick="handleClick(this)"，然后在函数里用 getAttribute('data-id') 读取，是最稳的。别写 onclick="handleClick(this.dataset.id)"——dataset 在 onclick 字符串执行时还没初始化，会报 undefined。
常见错误现象：onclick="doSomething(data-user-id)" 报错 ReferenceError: data is not defined，因为浏览器把 data-user-id 当成变量名去查了；或者写成 onclick="doSomething(this.getAttribute('data-user-id'))"，但 HTML 解析器不支持在属性值里嵌 JS 表达式，直接当纯文本丢掉。
- 只传
this，所有 data 值在函数内按需读取 - 如果必须 inline 写值，用单引号包裹字符串：
onclick="handleClick('user_123')"，但这样硬编码失去灵活性 - 避免用
dataset名字做 inline 参数，它不是实时 DOM 属性，且命名转换不可控
jQuery click 回调中读 data-* 的坑
$(el).on('click', function() { ... }) 里，$(this).attr('data-id') 和 $(this).data('id') 完全是两回事，混用必出 bug。
使用场景举例：后端渲染了 <button data-count="0">，你点一次想加 1 并更新 DOM。若写 $(this).data('count', $(this).data('count') + 1)，DOM 上的 data-count 属性值仍是 "0"，下次刷新页面就丢状态；而 $(this).attr('data-count', Number($(this).attr('data-count')) + 1) 才真改了 HTML 属性。
立即学习“前端免费学习笔记（深入）”；
- 只读原始值（比如服务端下发的 ID、类型标识）→ 用
$(this).attr('data-xxx') - 存运行时状态（如开关状态、计数器）→ 用
$(this).data('xxx')，但别指望它同步到 DOM - 绝对不要
$(this).data('xxx', JSON.stringify(obj))，jQuery 会尝试解析，失败时行为不一致
dataset 对数字/大写/下划线命名静默失效
element.dataset 不是“所有 data-* 属性的映射”，它只认符合规范的命名：全小写 + 连字符。一旦 HTML 里写了 data-item-2-id="abc" 或 data-API-Key="xyz"，element.dataset.item2Id 和 element.dataset.apiKey 都是 undefined，不报错也不提示。
常见错误现象：控制台打印 element.dataset 看起来有值，但访问具体 key 却是 undefined；或不同浏览器表现不一（Safari 对含数字更敏感，Firefox 更宽松）。
- 含数字 → 必须用
element.getAttribute('data-item-2-id') - 含大写或下划线 →
element.getAttribute('data-API_Key')，别指望驼峰转换 - 不确定命名是否规范？一律用
getAttribute，它不转换、不猜测、不静默失败
批量读取所有 data-* 属性的可靠写法
需要遍历元素上所有 data- 属性时，element.dataset 的键不全（漏掉非法命名），也不能保证顺序；用 element.attributes 过滤最可靠。
实操建议：
const dataAttrs = Array.from(element.attributes)
.filter(attr => attr.name.startsWith('data-'))
.reduce((acc, attr) => {
acc[attr.name] = attr.value;
return acc;
}, {});
这个结果是原始 name → 原始 value 的映射，不会丢 data-123-id，也不会把 data-User-Name 强行转成 userName。注意：IE11 支持 attributes，但不支持 Array.from，需补 [].slice.call(...) 或用 for 循环。
真正难的不是语法，而是意识到 dataset 是个“有严格命名洁癖的便利工具”，而不是 data-* 的通用接口——只要 HTML 由后端模板、CMS 或第三方组件生成，你就大概率遇到非标准命名，这时候 getAttribute 就是唯一不翻车的路径。
