### [把多参数传给 JS：用 data-* 属性加监听](https://www.huociguo.com/article/1882)

**Published:** 2026-10-04T03:22:48

**Author:** 米了

**Excerpt:** 页面需把多条数据（用户 ID、设备号）从 HTML 传到 JS 函数。两种常见写法差异显著。 🔴 方案 A：拼…

![data-\* 属性传参给 JS 示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-34804020.jpeg)

页面需把多条数据（用户 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`）。

📊 对比

| 维度  | 拼接调用 | data-\* + 监听 |
| --- | --- | --- |
| 特殊字符 | 易报错 | 安全  |
| 可维护性 | 差   | 好   |
| 内容安全 | 弱   | 强   |
| 类型  | 原样  | 字符串 |

📌 约定

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

**Tags:** data-* 传参, dataset, HTML 数据属性, 事件监听器, 多参数传递

**Categories:** HTML5

---