把多参数传给 JS：用 data-* 属性加监听

页面需把多条数据（用户 ID、设备号）从 HTML 传到 JS 函数。两种常见写法差异显著。

🔴 方案 A：拼接 JS 调用

<button onclick='handle(123, "ab")'>按钮</button>

缺点：值含引号、空格、特殊字符时拼接易出错；与 HTML 属性引号冲突会直接语法报错；难以维护，且不利于内容安全策略。

🟢 方案 B：data-* + 监听

<button data-uid='123' data-dev='ab'>按钮</button>
<script>
  document.querySelectorAll('button').forEach(b => {
    b.addEventListener('click', () => {
      const uid = b.dataset.uid;
      const dev = b.dataset.dev;
      handle(uid, dev);
    });
  });
</script>

dataset 统一读取，值恒为字符串，命名自动驼峰（data-user-id 读作 dataset.userId）。

📊 对比

📌 约定

命名只用小写字母、数字、连字符，避免大写与下划线；需要非字符串类型时，在 JS 内自行 Number() 或 JSON.parse() 转换。