javascript - event.target 与 event.relatedTarget

Question

我想知道 event.target 和 event.latedTarget 之间的区别。以下是拖放事件的代码块。

  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

某些事件使用 latedTarget 事件目标来指定辅助目标。另一方面，大多数 DOM 事件都会使用 target 来指定事件的主要目标。

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

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

已回答here

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

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

在此示例中，当您将鼠标悬停在内部 div 内部时，然后在处理程序中:

• event.target 引用 .inner 元素(这为您提供了元素事件起源)
• event.latedTarget 引用 .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';

  }

谢谢。