13. event.target 和 event.currentTarget 区别

总结

1. 利用事件冒泡原理，将子元素的事件委托给父元素。

---

定义说明

• event.target
  表示触发事件的元素，即事件的最初发起者。该属性不会随着事件冒泡阶段而改变，始终指向触发事件的那个元素。

• event.currentTarget
  表示当前正在执行事件处理函数的元素，即绑定事件监听器的那个元素。在事件传播过程中，该值保持不变。

主要区别对比表

对比维度	event.target	event.currentTarget
含义	触发事件的元素	绑定事件的元素
是否随事件冒泡改变	是，可能在冒泡阶段指向子元素	否，始终保持绑定目标不变
用途	获取实际点击/触发的元素	获取绑定事件的当前元素

代码示例

<!-- HTML 结构 -->
<div id="parent"><button id="child">点击我</button>
</div>

// JavaScript 事件监听
document.getElementById("parent").addEventListener("click", function (event) {console.log("event.target:", event.target); // 输出 <button id="child">...</button>console.log("event.currentTarget:", event.currentTarget); // 输出 <div id="parent">...</div>
});

当点击 <button> 时：

• event.target 指向 <button>（触发事件的元素）。
• event.currentTarget 指向 <div>（绑定事件监听器的元素）。

应用场景

• ✅ 使用 event.target 的场景：

  • 实现事件委托（将子元素的事件交由父级统一处理）。
  • 动态加载元素时，无需重复绑定事件。

• ✅ 使用 event.currentTarget 的场景：

  • 需要确保访问的是绑定事件的目标元素本身。
  • 避免因事件冒泡导致的元素误判。

注意事项

• ❗ event.target 和 event.currentTarget 在事件冒泡机制中行为不同，需根据需求选择使用。
• ❗ event.currentTarget 是只读属性，不可赋值。
• 📌 使用事件委托时，通常使用 event.target 来判断具体触发的子元素。

---