JavaScript 事件中的 currentTarget 与 target：有什么区别？

JavaScript 事件中的 currentTarget 与 target：揭开差异

在 JavaScript 事件处理领域，了解 currentTarget 和 target 之间的区别目标属性至关重要。让我们借助示例来深入了解它们的差异。

探索目标属性

目标属性表示直接触发事件的元素。考虑以下场景：

const button = document.querySelector('button');

button.addEventListener('click', (e) => {
  console.log(e.target); // Logs the button element clicked
});

在此示例中，单击按钮时，e.target 将引用按钮本身，因为它是发起单击事件的元素。

介绍currentTarget属性

当target指向事件的发起者时，currentTarget表示事件处理程序附加到的元素。让我们修改之前的代码：

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', (e) => {
  console.log(e.currentTarget); // Logs the wrapper div
});

在这种情况下，e.currentTarget 将引用包装器 div，即使单击事件源自其中的按钮。这是因为事件侦听器附加到包装器，使其成为控制元素。

选择正确的属性：基于场景的指南

• 在以下情况下使用目标：您需要访问有关 непосредственно 的元素的信息引发事件。
• 在以下情况下使用 currentTarget： 您想要使用事件处理程序附加到的元素，无论事件源自该元素层次结构中的哪个位置。

以上是JavaScript 事件中的 currentTarget 与 target：有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！