dataset配合事件委托是最轻量可维护的DOM数据绑定方式，需满足data属性命名合法（全小写短横线）、读取不依赖内联JS、事件监听范围精准；data-属性命名敏感，仅data-track-id等格式有效；事件应委托至语义化父容器而非document；dataset值恒为字符串，解析JSON须try/catch；禁用data存敏感信息；hidden属性优于style.display；禁用按钮宜用CSS控制；dataset不自动响应属性变更，需重新读取。
直接用 dataset 配合事件委托是目前最轻量、最可维护的 DOM 数据绑定方式，但前提是 data 属性命名合法、读取逻辑不依赖内联 JS、且事件监听范围收得够紧。
data-* 属性命名必须全小写加短横线
浏览器对 data- 后的命名非常敏感：data-track-id 可以被 el.dataset.trackId 正确读取；data-TrackId 或 data-track_id 则完全进不了 dataset 对象——它会被忽略，in 操作符都查不到。
-
data-track-id="submit-login"✅ 合法，el.dataset.trackId返回"submit-login" -
data-userid="123"✅ 合法（无短横线也行，但语义弱） -
data-track-id-2="v2"⚠️ 部分老版 Safari 解析异常，不建议数字开头 -
data-=""❌ 空值属性不会出现在dataset中
事件委托必须监听到能覆盖目标的父容器
别在 document 上无差别监听所有 click，容易误触、难调试。优先选语义明确的包裹容器，比如 .form-section、#user-table 或 tbody。
- 表格按钮操作：监听
tbody，用e.target.closest('button[data-id]')安全捕获目标按钮 - 单选表单切换：监听
.form-wrapper，过滤input[type=radio][data-id] - 避免监听
body或document—— 除非你真需要全局埋点 - 动态插入的节点会自动生效，无需重新绑定
dataset 读取返回字符串，复杂数据要 JSON.parse + try/catch
dataset 只返回字符串，哪怕你写了 data-row='{"id":123}'，拿到的也是字符串，不是对象。硬解会报错，必须包裹 try/catch。
立即学习“前端免费学习笔记（深入）”；
-
const row = JSON.parse(btn.dataset.row)→ 报错如果值为空或格式非法 - 正确写法：
try { const data = JSON.parse(btn.dataset.row || '{}'); } catch (e) { /* 忽略或 fallback */ } - 不要把敏感信息（如 token、用户手机号）塞进
data-—— 它明文可见、不可控 - 服务端渲染时，务必对变量做 HTML 属性转义，防止 XSS
隐藏/显示逻辑别混用 hidden 和 style.display
用原生 hidden 属性比手动切 style.display 更可靠：它支持 CSS 伪类 :not([hidden])，能被屏幕阅读器识别，且不会和 CSS 动画冲突。
- 推荐：
formEl.hidden = (formId !== targetId) - 避免：
formEl.style.display = 'none'—— 容易被其他样式覆盖，调试困难 - 禁用按钮别用
disabled控制交互状态，改用class="is-disabled"+ CSS 阻断 pointer-events - 所有关联元素的
id和data-id值必须严格一致，大小写、短横线一个都不能错
最容易被忽略的是：dataset 不会响应属性变更后的实时更新，一旦 JS 修改了 data- 值，必须重新调用 el.dataset.xxx 才能读到新值；而 getAttribute 总是返回当前属性字符串——这点在调试时经常卡人几秒。
