event.target vs event.relatedTarget

Question

我想知道event.target和event.relatedTarget之间的区别。以下是拖放活动的代码块。

  ondragleave: function (event) {
    // remove the drop feedback style
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
    event.relatedTarget.textContent = 'Dragged out';

  }

Answer 1

某些事件使用relatedTarget事件目标来指定次要目标。另一方面，大多数DOM事件将使用目标来指定事件的主要目标。

例如，在focus事件期间，target将成为获得焦点的元素，而relatedTarget将成为失去焦点的元素。

您可以在此处查看指定relatedTarget的DOM事件的详尽列表：MouseEvent.relatedTarget.

正如回答here

从上面的解释来看，我们可以这么说

<div class="outer">
  <div class="inner"></div>
</div>

在这个例子中，当你将鼠标悬停在内部div中时，然后在处理程序中：

• event.target引用.inner元素（这为您提供事件发生的元素）
• event.relatedTarget引用.outer元素（这为您提供了首先接收焦点并将焦点放在其他元素上的元素）

你可以查看这个fiddle以便更好地理解

---

现在在你自己的场景中

ondragleave: function (event) {
    /*when the dragged element leaves the drop target, remove the 
    .drop-target class from the current focused element*/
    event.target.classList.remove('drop-target');

    /*remove the .can-drop class from the element that looses focus 
    to the current focused element and changed the text to Dragged Out*/
    event.relatedTarget.classList.remove('can-drop');
    event.relatedTarget.textContent = 'Dragged out';

  }

谢谢。