HTML按钮通过data-*自定义属性存参，JavaScript用dataset或getAttribute读取；推荐addEventListener监听+dataset访问，避免内联onclick；注意data-值恒为字符串，需手动类型转换，检测存在性应使用'in'操作符。
HTML按钮怎么带参数传给JavaScript？
按钮本身不“传参”，本质是把参数存到DOM上，再由事件监听器读取。最常用也最稳妥的方式就是用 data-* 自定义属性——浏览器原生支持，语义清晰，不会污染标准属性。
比如你有一个删除按钮，想告诉JS删哪条记录：
<button type="button" data-id="123" data-type="user">删除</button>
注意：data- 后面只能跟字母、数字、连字符（不能下划线），且连字符会被转成驼峰（data-user-id → dataset.userId）。
-
data-属性值始终是字符串，哪怕你写data-count="0"，取出来也是"0"，需要手动转类型 - 不要用
data-存复杂对象或函数，它只适合简单标识符、ID、状态码这类轻量数据 - 如果参数含空格或特殊字符（如 JSON 字符串），必须用双引号包裹属性值，否则解析会出错
如何在onclick里直接取data-\*值？
不推荐在HTML里写内联 onclick 调用函数并传参，容易混乱且难维护。但如果你真要这么做，得靠 this.dataset 或 this.getAttribute()：
立即学习“前端免费学习笔记（深入）”；
<button onclick="handleClick(this)" data-id="456">编辑</button>
对应JS：
function handleClick(btn) {<br> const id = btn.dataset.id; // "456"<br> const type = btn.getAttribute('data-type'); // 更通用，支持任意data-*名<br>}
关键点：
-
this指向当前按钮，必须显式传入，不能写成onclick="handleClick()" -
dataset只能访问合法命名的data-属性（如data-user-id→dataset.userId），遇到非法名（如data-123）要用getAttribute - 内联事件里别拼接字符串传参（比如
onclick="handleClick(123)"），容易XSS和类型丢失
用addEventListener怎么安全取data-\*？
这是现代写法的首选。事件委托+dataset读取，干净又灵活：
document.addEventListener('click', function(e) {<br> if (e.target.matches('[data-action="delete"]')) {<br> const id = e.target.dataset.id;<br> const confirm = e.target.dataset.confirm === 'true'; // 注意布尔值要手动判断<br> deleteItem(id, confirm);<br> }<br>});
好处很明显：
- 无需给每个按钮单独绑定，一个监听器管全场
-
e.target确保拿到真正被点击的元素，不是父容器 -
dataset返回的是 DOMStringMap，所有 key 都自动转小驼峰，data-user-role→dataset.userRole - 如果属性不存在，
dataset.xxx返回空字符串，不是undefined，判断时注意用in或hasOwnProperty
data-\*取值常见坑：null、undefined还是空字符串？
这个最容易误判。浏览器对 data- 的处理很统一，但开发者常掉坑里：
- 没写该属性：
btn.dataset.missing→undefined - 写了但值为空：
<button data-flag="">→btn.dataset.flag→""（空字符串，不是null） - 写了但值是
"false"：btn.dataset.enabled === "false"是 true，但它不是布尔 false - 想检测是否存在，别用
if (btn.dataset.id)，因为"0"、"false"、""都是falsy；改用if ('id' in btn.dataset)
实际业务中，建议封装一个取值工具函数，统一做字符串转数字/布尔/JSON解析，避免每个地方重复判断。
