事件委托中获取data属性值应通过e.target.closest()定位目标元素后使用dataset.userid等驼峰命名访问，兼容旧浏览器可用getattribute('data-user-id')。

在事件委托中获取自定义 data 属性值，关键是通过事件对象的 target（或 currentTarget）调用 dataset API，它会自动将 data- 开头的属性转为驼峰命名的可读属性。

使用 dataset 获取 data 属性（推荐）

dataset 是最简洁、语义最清晰的方式。HTML 中写 data-user-id="123"，JS 中就用 e.target.dataset.userId（注意：连字符自动转为驼峰）。

• 支持所有标准 data-* 属性，无需手动解析字符串
• 自动处理大小写转换：如 data-user-name → dataset.userName
• 返回值始终是字符串，空值或不存在时返回空字符串，不会报错

确保事件目标是带 data 属性的元素

事件委托通常绑定在父容器上，但 e.target 可能是子元素（比如按钮里的图标、文字），不一定有你要的 data 属性。稳妥做法是向上查找最近的匹配元素：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• 用 e.target.closest('[data-user-id]') 定位到最近的带该属性的祖先或自身
• 再取 .dataset.userId，避免因点击子节点导致取不到值
• 示例：const btn = e.target.closest('button[data-action]'); if (btn) console.log(btn.dataset.action);

兼容旧浏览器时用 getAttribute

如果需支持 IE10 或更早版本（dataset 不被支持），可用 getAttribute 手动读取：

• e.target.getAttribute('data-user-id') 返回原始字符串，包括大小写和连字符
• 注意：需要自己处理空值判断，比如 attr === null ? undefined : attr
• 不推荐新项目使用，除非明确要兼容老旧环境

常见陷阱与提醒

几个容易出错的地方：

• currentTarget 是绑定事件的父元素，一般没有 data 属性，别误用它取值
• dataset 只识别 data- 开头的属性，data 或 data_ 这类无效
• 动态添加的元素，只要事件委托绑定在静态父级上，且 HTML 结构正确，dataset 照样可用
• 属性值含空格、特殊字符不影响读取，但建议保持 URL-safe 格式便于维护

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南