javascript - 不同的 *Target 属性的目的是什么？

Question

在 MouseEvent 类中有多个 *Target 事件:

• target
• currentTarget
• relatedTarget

它们在 MouseEvent 上下文中的用途是什么？

Answer 1

这些属性等同于 JavaScript 鼠标事件。 JavaScript 事件遍历 DOM(称为“冒泡”)。 target是最初派发事件的对象。 currentTarget是您的事件处理程序附加到的对象。

示例

你有这个 HTML 结构:

<ul id="list">
  <li>Entry 1</li>
  <li>Entry 2</li>
</ul>

然后您将点击处理程序添加到 <ul>元素(通过 JavaScript 或 Dart，概念是相同的)。

当您随后单击“条目 2”时，将调用您的单击处理程序(因为事件“冒泡”到它)。 target将是 <li>元素，同时 currentTarget将是 <ul>元素。您必须使用哪一个取决于您要在处理程序中执行的操作 - 例如，您可以使用 target 隐藏“条目 2”本身。 ，或使用 currentTarget 的整个列表.

relatedTarget 引用的元素取决于您的 MouseEvent 类型 - 可以在此处找到列表:event.relatedTarget .在上面的示例中，它将是 null ，因为点击事件没有任何相关的目标。

相关 MDN 链接: event.currentTarget , event.target