事件委托中提取自定义属性的核心是用event.target获取触发元素，再通过dataset（推荐，自动驼峰转换）或getAttribute()（灵活读取任意属性）读取data-*等自定义属性，并用closest()确保获取目标容器，最后进行类型转换与容错处理。
在事件委托中提取自定义属性作为业务参数，核心是利用 event.target 获取实际触发事件的元素，再通过 dataset 或 getAttribute() 读取其自定义属性（如 data-id、data-action 等），避免为每个子元素单独绑定事件。
使用 dataset 获取 data-* 属性（推荐）
dataset 是最简洁安全的方式，自动将 data-xxx-yyy 转为驼峰命名（如 data-user-id → target.dataset.userId）。注意：仅支持以 data- 开头的合法自定义属性。
- HTML 中写：
- JS 中读取：const userId = event.target.dataset.userId;（返回字符串，需手动转类型）
- 兼容性好，现代浏览器均支持，且自动过滤非法属性名
用 getAttribute() 读取任意属性（含非 data-*）
当需要读取非标准前缀的自定义属性（如 uid、role）或需保留原始大小写/连字符时，用 getAttribute() 更灵活。
- HTML 示例：编辑
- JS 中读取：const uid = event.target.getAttribute('uid');
- 注意：返回
null表示属性不存在，需判空；不自动转换命名格式
确保捕获的是目标元素，不是父容器
事件委托中，event.target 可能是子元素（如按钮内的图标），而业务参数常在按钮自身。建议用 closest() 向上查找最近的业务容器。
- 例如：const btn = event.target.closest('[data-action]');
- 再从
btn读取：btn.dataset.action、btn.dataset.itemId - 避免因点击文本/图标导致
dataset为空
类型转换与容错处理
自定义属性值始终是字符串，业务中常需数字、布尔或对象。务必做显式转换，并处理缺失情况。
- 转数字：
parseInt(btn.dataset.id, 10)或Number(btn.dataset.id) - 转布尔：
btn.dataset.enabled === 'true'（HTML 中布尔属性建议存字符串'true'/'false'） - 容错写法：
const id = btn?.dataset?.id || 'default';
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
