data-*属性存参最轻量但易错：命名须小写连字符，dataset自动驼峰映射，值恒为字符串，需手动类型转换；禁用JSON；事件委托更可靠；dataset赋值不更新DOM，须用setAttribute。
直接用 data-* 属性存参数，再在事件处理函数里通过 element.dataset 读取——这是最轻量、最标准、也最容易出错的方案。别写 onclick="handleClick(id)"，也别往属性里塞 JSON。
data-* 属性名必须全小写 + 连字符，否则 dataset 读不到
浏览器只把符合 kebab-case（小写字母+短横线）的 data- 属性映射进 dataset。写错就返回 undefined，但 getAttribute() 还能取到，容易误判。
-
data-action-type="submit"→el.dataset.actionType✅ -
data-actionType="submit"→el.dataset.actionType === undefined❌ -
data-user_id="1024"→ 下划线不合法，dataset忽略 ❌ -
data-123id="abc"→ 数字开头部分浏览器解析异常（尤其老 Safari），建议改data-id123⚠️
事件委托比逐个绑定更可靠，尤其动态渲染场景
页面加载后新增的按钮、列表项、模态框里的操作按钮，如果用 querySelectorAll('[data-id]').forEach(...) 绑定，新节点永远没监听器。父容器一次监听 + e.target.closest('[data-track-id]') 才稳。
- 用
e.target.closest('[data-action]')穿透子元素（比如按钮内有<span>），避免手动向上遍历 - 别用
getAttribute('data-action')替代dataset.action：前者返回原始字符串，后者自动转驼峰，但值仍是字符串 - 如果按钮是
<a href="#">，记得e.preventDefault()，防止跳转打断埋点时机
data-* 值永远是字符串，类型要自己转
dataset 不做隐式类型转换。哪怕你写 data-count="42" 或 data-active="true"，拿到的都是字符串。JS 逻辑里该 parseInt() 就 parseInt()，该 === 'true' 就 === 'true'。
立即学习“前端免费学习笔记（深入）”；
-
data-value="42"→el.dataset.value === "42"（不是数字 42） -
data-enabled="true"→el.dataset.enabled === "true"（不是布尔true） - 需要布尔判断？写
el.dataset.enabled === 'true'，别信!!el.dataset.enabled - 需要数字？显式
parseInt(el.dataset.count, 10)或Number(el.dataset.count)
禁止在 data-* 里塞 JSON 或复杂结构
属性值本质是 HTML 字符串，引号冲突、解析失败、无校验、静默丢弃——全是坑。真要传对象，走 JS 变量或模块导出，别塞进 DOM。
-
data-payload='{"id":123,"src":"modal"}'❌ 易被 XSS 利用，且单双引号混用极易报错 -
data-id="123"✅ 拆成多个原子属性，安全、可选中、易调试 - CSS 选择器如
[]能稳定匹配；JSON 字符串无法被可靠定位 - 服务端输出时，必须对
data-*的值做 HTML 属性级转义（比如"→"），否则破坏 DOM 结构
最常被忽略的点：dataset 是只读映射，el.dataset.foo = "bar" 不会更新 DOM 属性，也不会触发 CSS 重匹配；要持久化必须用 el.setAttribute('data-foo', 'bar')。而首次渲染后的变更，除非你用自定义元素配 observedAttributes，否则没有自动响应机制——所有“绑定感”，都得你手动桥接。
