<p>data-* 属性必须用 kebab-case 命名（如 data-user-id），HTML 解析器将其转为 camelCase（userId）供 dataset 访问；命名仅允许小写字母、数字、短横线，不能以数字开头，空属性不出现，dataset 仅返回字符串，复杂数据需 JSON 序列化。</p>
data-* 属性必须用 kebab-case 命名才能被 dataset 读取
HTML 中写 data-user-id="123"，JS 里才能通过 element.dataset.userId 正确拿到 "123"；如果写成 data-userId 或 data-UserId，dataset.userId 会返回 undefined。这不是浏览器兼容问题，而是 HTML 解析器强制转小写 + 连字符自动驼峰化的规则导致的。
常见错误现象：console.log(el.dataset.action) 是 undefined，但 el.getAttribute('data-action') 能取到值——说明属性确实存在，只是没进 dataset 映射表。
- 只允许小写字母、数字、短横线（
-），不能有下划线或大写字母 - 不能以数字开头，
data-123非法，data-id123合法 - 空属性无效：
data-status=""不会出现在dataset中
addEventListener 中通过 event.target.dataset 取值最稳妥
不要在 JSX 或 HTML 中直接写 onclick="handleClick(event)" 再手动传参，也不要用 btn.onclick = function() { ... } 覆盖式绑定。现代做法是统一用 addEventListener，并在回调里从 event.target.dataset 动态读取。
注意：必须用 event.target（触发事件的实际元素），而不是 event.currentTarget（绑定监听器的元素）——尤其在事件委托场景下，二者可能不同。
立即学习“前端免费学习笔记（深入）”；
- 如果按钮内含图标或文字子元素，点击子元素时
event.target是子节点，它可能没有dataset；此时应用event.target.closest('[data-num]')向上查找带 data 属性的祖先 -
dataset只返回字符串，数值需显式转换：Number(event.target.dataset.num)或parseInt(..., 10) - 避免在 dataset 中存对象或函数，它只支持字符串；复杂数据建议 JSON.stringify 后存，再 JSON.parse 读取
React 中 data 属性是安全传递列表项数据的首选方式
别在 JSX 里写 <li airport="{airport}" onclick="{...}">——React 会忽略非标准属性，且原生 DOM 上根本不存在 airport 这个属性。正确做法是把字段映射为 data- 前缀属性：
<li
key={airport.iata}
data-iata={airport.iata}
data-lat={airport.latitude}
data-lon={airport.longitude}
data-name={airport.name}
onClick={handleLiClick}
>
{airport.name}
</li>
对应处理函数中：
const handleLiClick = (event) => {
const { iata, lat, lon, name } = event.target.dataset;
console.log({ iata, lat: Number(lat), lon: Number(lon), name });
};
- React 会把
data-*属性原样透传给 DOM，不加过滤 - 不要依赖
event.target.innerHTML提取文本做 ID 判断，易受空格、换行、HTML 标签干扰 - 若需传递嵌套对象，先
JSON.stringify(obj)存入data-config，再JSON.parse(event.target.dataset.config)读取
大量按钮共用一个事件处理器时，data 属性 + 事件委托更高效
渲染 512 个按钮时，逐个调用 addEventListener 是低效且易内存泄漏的。应该把监听器绑定到父容器，靠 event.target.dataset 区分来源：
<div id="grid"> <button data-num="0">Btn 1</button> <button data-num="1">Btn 2</button> <!-- ... --> </div>
document.getElementById('grid').addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON' && e.target.dataset.num != null) {
const index = Number(e.target.dataset.num);
updateState(index); // 例如切换数组某项状态
}
});
- 避免对每个按钮重复绑定，DOM 更新后无需重新绑定
- 动态增删按钮时，新按钮天然响应事件，无需额外操作
- 务必加
if条件判断目标元素类型和 dataset 存在性，防止误触发
真实项目里最容易被忽略的是 dataset 的类型限制和命名转换规则——看似写对了，却因一个大写字母或下划线导致取不到值，调试时又容易误以为是 React 没渲染或事件没绑定上。
