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

Question

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

• 目标
• 当前目标
• 相关目标

它们在 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>元素。您必须使用哪一个取决于您想在处理程序中执行的操作 - 例如，您可以使用 隐藏“条目 2”本身target，或者使用 隐藏整个列表currentTarget。

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

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