dataset属性名必须为kebab-case格式，如data-event-name对应JS中的eventName；它仅映射字符串值，不支持函数引用或数字开头，IE10及以下需用getAttribute兼容。
dataset 属性名必须是 kebab-case 格式，否则 JS 读不到
HTML5 的 dataset 是把自定义属性映射成 JS 对象的桥梁，但它的转换规则很严格：HTML 中写 data-event-name，JS 里才对应 element.dataset.eventName。如果写成 data-eventName 或 data-EventName，dataset 字段直接消失。
常见错误现象：element.dataset.eventName 返回 undefined，哪怕 DOM 上明明写了属性；用 getAttribute('data-eventName') 却能取到——说明不是没渲染，是 dataset 映射失败。
- HTML 中只能用小写字母 + 连字符（kebab-case），如
data-click-handler、data-api-version - JS 中自动转为 camelCase，连字符后首字母大写，
data-user-id→dataset.userId - 避免数字开头或纯数字字段，
data-123不合法，data-id123可以
绑定事件监听器时，别直接在 dataset 里存函数引用
dataset 存的是字符串，不是 JS 值。试图写 data-handler="handleClick" 然后 element.addEventListener('click', element.dataset.handler)，结果绑的是字符串 "handleClick"，不是函数。
正确做法是用字符串做“事件名标识”，再查表映射到真实函数：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const handlers = {
'submit-form': handleSubmit,
'toggle-menu': toggleMenu
};
element.addEventListener('click', () => {
const type = element.dataset.eventType; // 如 "submit-form"
if (handlers[type]) handlers[type](element);
});- 永远不要把函数名当字符串塞进
dataset后直接eval()或Function()调用——安全风险+调试地狱 - 多个元素共用同一 handler？用
dataset区分参数，比如data-action="delete" data-id="123"，handler 内部统一解析 - 注意作用域：handler 函数若依赖闭包变量，确保它在监听器执行时仍可访问
动态添加 data-* 属性后，dataset 不会自动更新？其实是缓存假象
给元素新增 data- 属性后，element.dataset.xxx 看起来没变——这不是 bug，是浏览器对 dataset 的惰性同步机制。实际修改 DOM 属性后，下次访问 dataset 就能读到新值，但不会触发重计算或事件。
典型误判场景：用 element.setAttribute('data-loading', 'true') 后立刻检查 dataset.loading，发现还是 undefined，以为失败了。
- 只要属性已写入 DOM（可用
getAttribute('data-loading')验证），dataset下次读取就一定有值 - 不需要手动刷新或重建 dataset 对象
- 若需响应式监听变化，得用
MutationObserver监听attributes，并过滤data-开头的变更
IE11 及更老浏览器不支持 dataset，但 fallback 很轻量
dataset 在 IE11 中支持，IE10 及以下完全不支持。不过替代方案极简单：所有 data- 属性都能用 getAttribute() 和 setAttribute() 安全操作。
兼容写法建议封装一层：
function getData(el, key) {
return el.dataset ? el.dataset[key] : el.getAttribute(`data-${key}`);
}
function setData(el, key, value) {
if (el.dataset) el.dataset[key] = value;
else el.setAttribute(`data-${key}`, value);
}- 别为了兼容写两套逻辑，统一走 getAttribute/setAttribute 更稳，
dataset只是语法糖 - 注意大小写：getAttribute 传
'data-user-id'，不能传'data-userId' - 移动端 WebView 兼容性比桌面 IE 更好，但旧版 Android UC/qq 浏览器可能有坑，实测优先
事情说清了就结束。真正容易被忽略的是：dataset 的映射规则和字符串本质，这两点一旦理解偏差，调试时就会陷入“DOM 有值、JS 读不到”的循环。
