HTML | currentTarget 事件属性

在 HTML 中，事件可以是某个 HTML 元素上的事件，比如点击、鼠标移动、键盘按下等等。当一个事件触发时，浏览器会提供一些事件属性，其中之一就是 currentTarget。

currentTarget 是什么？

currentTarget 属性返回触发事件的元素，即事件绑定的元素。与之不同的是，target 属性返回引起事件的元素，它可以与事件绑定的元素不同。

具体来说，当触发事件的元素 A 嵌套了另一个元素 B，而事件绑定在元素 A 上，那么：

• 当事件发生在 A 上，currentTarget 和 target 都指向 A；
• 当事件发生在 B 上，currentTarget 指向 A，而 target 指向 B。

currentTarget 如何使用？

我们可以通过 JavaScript 代码来获取 currentTarget 属性，在事件处理函数中使用 event.currentTarget 即可。例如：

document.getElementById("myButton").addEventListener("click", function(event) {
  console.log(event.currentTarget); // 输出 <button id="myButton">Click me!</button>
});

在这个例子中，我们监听了一个按钮的 click 事件，当事件发生时，控制台将输出按钮本身，即当前元素。

案例分析

假设我们有一个 HTML 页面，其中有两个 div 元素 A 和 B，B 嵌套在 A 内部。我们为元素 A 和 B 绑定 click 事件：

<style>
  #divA {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 50px;
  }
  #divB {
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
</style>

<div id="divA">
  <div id="divB"></div>
</div>

<script>
  var divA = document.getElementById("divA");
  var divB = document.getElementById("divB");
  
  divA.addEventListener("click", function(event) {
    console.log("Event happened on A. Current target is", event.currentTarget);
    console.log("Event happened on A. Target is", event.target);
  });
  
  divB.addEventListener("click", function(event) {
    console.log("Event happened on B. Current target is", event.currentTarget);
    console.log("Event happened on B. Target is", event.target);
  });
</script>

当用户点击元素 B 时，控制台应该会输出：

Event happened on B. Current target is <div id="divA">...</div>
Event happened on B. Target is <div id="divB"></div>

这说明 currentTarget 指向绑定事件的元素 A，而 target 指向引起事件的元素 B。