深入探索e.target和this在事件对象中的微妙差异

2023-12-23 02:13:25

在JavaScript中，事件对象是一个包含有关事件信息的对象，例如事件类型、时间戳和触发事件的元素。在事件处理中，我们经常使用e.target和this来引用触发事件的元素。虽然它们乍看之下似乎相同，但实际上它们之间存在着微妙的差异，这对于理解事件处理至关重要。

e.target

e.target返回的是触发事件的对象（元素）。它始终指向事件的源头，即触发该事件的具体元素。例如，如果我们有一个按钮元素，当单击它时触发一个事件，那么e.target将指向该按钮元素。

this

this返回的是绑定事件的对象（元素）。它指向当前正在处理事件的元素。在大多数情况下，this与e.target是相同的。然而，在某些情况下，它们可能不同。例如，当一个元素嵌套在另一个元素中时，如果内部元素触发了一个事件，那么e.target将指向内部元素，而this将指向外部元素。

以下是一个例子来说明e.target和this之间的区别：

<div id="parent">
  <button id="child">Click me</button>
</div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function(e) {
  console.log(e.target); // Output: #parent
  console.log(this); // Output: #parent
});

child.addEventListener('click', function(e) {
  console.log(e.target); // Output: #child
  console.log(this); // Output: #child
});