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

Question

在MouseEvent类中有多个*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>元素.您必须使用哪一个取决于您在处理程序中要执行的操作 - 例如,您可以通过使用隐藏"Entry 2"本身target,或使用整个列表隐藏currentTarget.

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

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