事件委托结合dataset是获取自定义参数最简洁高效的方式：将参数存于元素data-*属性，委托父级监听，通过event.target.dataset读取。

事件委托结合 dataset 是获取自定义参数最简洁、高效的方式，核心在于：**把参数存在元素的 data-* 属性里，委托到父级监听，再通过 event.target.dataset 拿值**。

一、HTML 中用 data-* 定义参数

在子元素上添加符合规范的自定义属性，比如：

<ul id="list">
  <li data-id="101" data-type="user">张三</li>
  <li data-id="102" data-type="admin">李四</li>
  <li data-id="103" data-role="editor">王五</li>
</ul>

注意：
– 属性名用短横线（data-user-id），JS 中会自动转为驼峰（dataset.userId）；
– data-id="101" → dataset.id；
– data-user-name="Alice" → dataset.userName；
– 值始终是字符串类型，如需数字/布尔，手动转换（Number(e.target.dataset.id) 或 JSON.parse()）。

二、父级绑定事件，从 target 提取 dataset

在父容器（如 ul）上监听事件，避免每个子项重复绑定：

document.getElementById('list').addEventListener('click', function (e) {
  // 确保点击的是 li 元素
  if (e.target.tagName === 'LI') {
    const { id, type, role } = e.target.dataset;
    console.log('ID:', id);      // "101"
    console.log('Type:', type);   // "user"
    console.log('Role:', role);   // undefined（第三项没这个属性）
  }
});

关键点：
– 不要用 e.currentTarget.dataset（那是父元素自己的 dataset）；
– 一定要用 e.target，且最好加标签判断，防止点击文字、内嵌标签时出错；
– 支持解构赋值，未定义的字段返回 undefined，安全可用。

三、处理内嵌结构或文本节点的兼容写法

如果 li 里面有 span、图标或空格，e.target 可能是子节点。稳妥做法是向上查找最近的带 data 属性的元素：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

document.getElementById('list').addEventListener('click', function (e) {
  const item = e.target.closest('li');
  if (item) {
    const { id, type } = item.dataset;
    console.log('Clicked item ID:', id);
  }
});

closest() 自动向上匹配，兼容各种点击位置，比反复判断 parentNode 更可靠。

四、进阶：传递复杂数据（对象/数组）

若需传对象，建议 JSON 序列化后存入：
<li data-config='{"level":2,"tags":["vip","active"]}'>用户</li>

JS 中解析：

const config = JSON.parse(e.target.dataset.config || '{}');
console.log(config.level); // 2

⚠️ 注意：
– 单引号包裹 JSON 字符串（避免 HTML 双引号冲突）；
– 加空值保护（|| '{}'），防止解析失败；
– 避免直接存函数或 undefined，JSON 不支持。