不同* 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