<p>必须使用以 data- 开头的属性（如 data-user-id="123"），JS 通过 dataset 或 getAttribute() 读取；连字符自动转 camelCase，值恒为字符串，禁存敏感信息，复杂数据需 JSON 编码或拆分为多个 data- 属性。</p>
按钮上怎么加自定义参数才不会被浏览器忽略
HTML 允许在任何元素上使用以 data- 开头的属性，这是唯一被规范支持的自定义参数方式。直接写 user-id="123" 或 type=delete 会被解析为无效 HTML 属性，JS 读不到，且可能触发验证警告。
必须用 data- 前缀，比如：data-user-id="123"、data-action="delete"、data-item-uuid="a1b2c3"。连字符会自动转成 camelCase，JS 中通过 dataset 访问时是 el.dataset.userId，不是 el.dataset.user-id（后者语法错误）。
- 属性名只允许字母、数字、连字符、下划线、点号，不能以数字开头
- 值始终是字符串，哪怕你写
data-count="5"，JS 里取出来也是"5"，需手动parseInt() - 不要用
data-存敏感数据（如 token），它完全暴露在 DOM 中
用 JavaScript 读取 data-* 属性的两种可靠方式
推荐优先用 dataset，语义清晰且自动处理命名转换；兼容旧环境或需要原样读属性名时，再用 getAttribute()。
示例：
立即学习“前端免费学习笔记（深入）”；
<button id="btn" data-user-id="456" data-is-admin="true" data-tag-name="user">操作</button>
dataset 读取：
btn.dataset.userId === "456"-
btn.dataset.isAdmim === "true"（注意：连字符后首字母大写，is-admin→isAdmin） btn.dataset.tagName === "user"
getAttribute() 读取（更直白，不转换命名）：
btn.getAttribute("data-user-id") === "456"btn.getAttribute("data-is-admin") === "true"- 适合读含大小写混合或特殊字符的属性名，比如
data-API-Key
绑定事件时怎么把 data-* 参数传进回调函数
别在 onclick 里拼字符串调函数，容易 XSS 和维护困难。正确做法是监听事件，然后在 handler 里从 event.target 读取。
- 避免：
<button onclick="handleClick('user', 123)">—— 硬编码、难扩展、易出错 - 推荐：
<button class="action-btn" data-type="user" data-id="123">编辑</button>，然后统一监听：
document.addEventListener("click", (e) => {
if (e.target.matches(".action-btn")) {
const type = e.target.dataset.type;
const id = Number(e.target.dataset.id);
handleClick(type, id);
}
});这样所有按钮复用同一逻辑，增删按钮不用改 JS，只改 HTML 属性即可。
data-* 传复杂结构（对象/数组）的坑
HTML 属性值只能是字符串，所以不能直接写 data-config="{name: 'abc'}" —— 这会被当成纯文本，JSON 解析会失败（缺少引号）。
- 安全做法：用
JSON.stringify()编码后塞进属性，读取时JSON.parse()解码 - 示例：
<button data-config='{"mode":"preview","timeout":3000}'>（注意单引号包裹整个 JSON 字符串） - 读取：
JSON.parse(btn.dataset.config) - 风险：如果值含用户输入，必须严格校验或 escape，否则可能注入恶意 JSON
- 更轻量替代：拆成多个
data-属性，比如data-mode="preview" data-timeout="3000"，避免解析开销和异常
真正要传大量结构化数据时，建议把数据存在 JS 对象里，用 data-id 当索引去查表，而不是全塞进 DOM。
