在 JavaScript 的事件处理函数中：
addEventListener("click", (e) => {
console.log(e.target);
});
其中的 e 是 事件对象（Event Object），而 e.target 表示触发该事件的 DOM 元素（即用户实际点击的那个元素，而不是绑定监听器的元素——这点在事件冒泡中特别重要）。
一、e.target 是什么？
e.target是一个 DOM 元素对象（如<button>、<div>、<span>等）。- 它指向事件最初发生的那个元素（即使事件监听器是绑定在父元素上的）。
示例：
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", (e) => {
console.log(e.target.id); // 点击按钮时输出 "child"，不是 "parent"
});
</script>
✅ 这就是“事件委托”（Event Delegation）的基础：通过监听父元素，处理子元素的事件。
二、e.target 常用属性
因为 e.target 是一个 DOM 元素，所以它拥有所有标准的 Element 属性，例如：
| 属性 | 说明 |
|---|---|
tagName | 元素标签名（大写），如 "BUTTON" |
nodeName | 同 tagName（对元素节点而言） |
id | 元素的 id 属性值 |
className | 元素的 class 字符串 |
classList | DOMTokenList 对象，用于操作 class（如 add, remove, toggle） |
textContent | 元素内的文本内容（不包含 HTML） |
innerHTML | 元素内的 HTML 内容 |
outerHTML | 包含自身标签的完整 HTML |
value | （表单元素如 <input>、<select>）当前值 |
checked | （<input type="checkbox/radio">）是否选中 |
dataset | 自定义数据属性集合（见下文） |
getAttribute(name) | 获取任意属性值 |
hasAttribute(name) | 判断是否有某属性 |
三、dataset 是什么？
dataset 是 DOM 元素上的一个 只读属性，用于访问 HTML 中以 data- 开头的自定义属性。
HTML 中定义：
<button data-user-id="123" data-action="delete" data-tooltip-text="删除用户">
删除
</button>
JS 中访问：
e.target.dataset.userId; // "123" （驼峰命名）
e.target.dataset.action; // "delete"
e.target.dataset.tooltipText; // "删除用户"
规则：
- HTML 中
data-xxx-yyy→ JS 中dataset.xxxYyy（自动转为驼峰） - 所有值都是字符串
- 可读可写（虽然
dataset本身是只读对象，但其属性可修改）
修改 dataset：
e.target.dataset.status = "processed";
// 相当于给元素添加了 data-status="processed"
四、典型应用场景
1. 事件委托 + dataset 实现通用操作
<ul id="list">
<li data-id="1">Item 1</li>
<li data-id="2">Item 2</li>
</ul>
<script>
document.getElementById("list").addEventListener("click", (e) => {
if (e.target.tagName === "LI") {
console.log("点击了 ID 为", e.target.dataset.id, "的项");
}
});
</script>
2. 动态获取操作类型
<button data-action="save">保存</button>
<button data-action="cancel">取消</button>
<script>
document.body.addEventListener("click", (e) => {
const action = e.target.dataset.action;
if (action === "save") {
// 执行保存逻辑
} else if (action === "cancel") {
// 执行取消逻辑
}
});
</script>
总结
| 概念 | 说明 |
|---|---|
e.target | 实际触发事件的 DOM 元素 |
| 常用属性 | id, className, value, textContent, dataset 等 |
dataset | 访问 data-* 自定义属性的快捷方式，自动驼峰转换 |
| 优势 | 无需硬编码 ID，实现灵活、可维护的交互逻辑 |
✅ 掌握 e.target 和 dataset，是实现事件委托和无状态组件交互的关键技巧！
