探讨target和 currentTarget属性的区别

在这篇文章中，我们探讨了 target和 currentTarget属性的区别。我们将在vanilla JavaScript以及React中探索事件target 和currentTarget 。

事件冒泡

在理解target 和currentTarget 之间的区别之前，我们需要理解事件冒泡。

当一个元素上的事件被引发时，该元素上的事件处理程序被调用。其父元素上的事件处理程序随后被调用，以此类推。因此，该事件在DOM树上冒泡。

虽然不是所有的事件都会冒泡。例如，元素上的click 事件会冒泡，但focus 事件则不会。事件处理参数的 bubbles属性告诉我们该事件是否会冒泡。

一个例子

让我们看一个例子:

<div class="container">
  <button>Click me</button>
</div>

所以，如果按钮被点击了，click 事件应该冒泡到div 元素上。

那么让我们在div 元素上处理click 事件:

const div = document.querySelector(".container");
div.addEventListener("click", (e) => {
  console.log("target", e.target);
  console.log("currentTarget", e.currentTarget);
});

如果我们点击按钮并查看控制台的输出，我们会看到target 和currentTarget 之间的区别:

• target 是引发该事件的根元素。
• currentTarget 是处理该事件的元素。

🏃播放代码。

React中的事件目标与当前目标

事件target 和currentTarget 在React应用程序中的行为是一样的吗？让我们来了解一下:

export default function App() {
  return (
    <div
      onClick={(e) => {
        console.log("target", e.target);
        console.log(
          "currentTarget",
          e.currentTarget
        );
      }}
    >
      <button>Click me</button>
    </div>
  );
}

如果我们点击按钮并查看控制台输出，我们会发现target 和currentTarget 的行为与vanilla HTML/JS中的行为相同。

这确实是有道理的，因为React的事件系统是对浏览器本地事件系统的一个封装。

🏃播放代码

包裹起来

在一个事件处理程序中，如果我们想引用引发事件的根元素，我们可以使用target 。如果我们要引用处理事件的元素，我们可以使用currentTarget 。