event.currentTarget与event.target的区别介绍

Event.currentTarget与Event.target的区别介绍

在JavaScript中，事件对象（Event）包含两个重要的属性：currentTarget和target。它们表示事件被哪个元素触发以及事件目标（即事件最初由哪个元素触发）。虽然看起来非常相似，但是它们却有着不同的作用，本文将详细讲解它们的区别。

Event.target

Event.target属性返回触发事件的元素。示例如下：

<div id="div1">
  <button id="btn1">按钮1</button>
  <button id="btn2">按钮2</button>
</div>

document.querySelector('#div1').addEventListener('click', function(event){
  console.log(event.target.id); // 输出触发事件的元素id
});

当我们在这段代码中点击按钮1或按钮2时，回调函数中的event.target属性就会返回相应的按钮元素。需要注意的是，这个属性只会返回触发事件的元素，而不是事件注册的元素。在上述示例中，事件是在div元素上注册的，但是当我们点击按钮时，target属性却返回了按钮元素。

Event.currentTarget

Event.currentTarget属性返回绑定事件的元素。当事件传播到父元素时，currentTarget仍然是绑定事件的元素，而target却是被点击的子元素。示例如下：

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>

document.querySelector('#outer').addEventListener('click', function(event){
  console.log('currentTarget:', event.currentTarget.id); // 输出绑定事件的元素id
  console.log('target:', event.target.id); // 输出触发事件的元素id
});

当我们在这段代码中点击按钮时，console会依次输出"currentTarget: outer"和"target: btn"。因为事件是在父元素outer上注册的，所以currentTarget属性会返回outer元素的id，而target则是被点击的btn元素。

小结

总结一下，Event.target表示事件的目标，即被点击的元素，而Event.currentTarget表示绑定事件的元素。它们的差异在事件传播的过程中表现得非常明显。在实际开发中，我们需要根据需要来选择使用哪个属性。

示例说明

1. 给按钮绑定click事件，点击按钮时弹出对话框，并输出事件对象中的target和currentTarget属性的值。

<button id="btn">点击我</button>

document.querySelector('#btn').addEventListener('click', function(event){
  alert('target: ' + event.target.id + ', currentTarget: ' + event.currentTarget.id);
});

1. 给父元素绑定click事件，在父元素中包含多个子元素，点击子元素时弹出对话框并输出事件对象中的target和currentTarget属性的值。

<div id="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

document.querySelector('#container').addEventListener('click', function(event){
  alert('target: ' + event.target.className + ', currentTarget: ' + event.currentTarget.id);
});