.relatedTarget

https://developer.mozilla.org/en-US/docs/Web/API/event.relatedTarget

イベントの二次ターゲットを示します。

relatedTargetプロパティは、イベントに関連する別の要素があれば、それを見つけるために使用されます。 mouseoverのようなイベントは、特定のターゲット周りを関わらせるだけでなく、 mouseoverイベントの発火が終了する際にターゲットになっているような、二次的なターゲットも巻き込みます。

イベント

MouseEventだけがこのプロパティを持ち、その値は特定のMouseEventにのみ意味があります。

イベント	このイベントでrelatedTargetが担う役割
focusin	主ターゲットがフォーカスが移ったことで、フォーカスを失った対象
focusout	主ターゲットがフォーカスを失ったことで、フォーカスを受け取った対象
mouseenter	主ターゲットにポインティングデバイスが入力された時に、その出発点となった対象
mouseleave	主ターゲットからポインティングデバイスが出て行った際に、その出て行った先の対象
mouseout	主ターゲットからポインティングデバイスが出て行った際に、その出て行った先の対象
mouseover	主ターゲットにポインティングデバイスが入力された時に、その出発点となった対象
dragenter	主ターゲットにポインティングデバイスが入力された時に、その出発点となった対象
dragexit	主ターゲットからポインティングデバイスが出て行った際に、その出て行った先の対象

例

<!DOCTYPE html>
<html>
<head>
<style>
div > div {
  height: 128px; width: 128px;
  margin-left: 170px;
}
#top    { background-color: red; }
#bottom { background-color: blue; }
#outer  { margin-top : 50px;}
</style>
</head>

<body>
<div id="outer">
  <div id="top"></div>
  <div id="bottom"></div>
</div>

<script>
function outListener(event) {
  //コンソールログに出力します。
  console.log(event.relatedTarget.id + "から、"
    + event.target.id + "へマウスポインタが出て行きました。");
}

function overListener(event) {
  //コンソールログに出力します。
  console.log(event.relatedTarget.id + "から、"
    + event.target.id + "へマウスポインタが入りました。");
}

function loadListener() {
  var top = document.getElementById("top"),
      bottom = document.getElementById("bottom");

  top.addEventListener("mouseover", overListener);
  top.addEventListener("mouseout", outListener);
  bottom.addEventListener("mouseover", overListener);
  bottom.addEventListener("mouseout", outListener);
}

//初期処理
loadListener();
</script>
</body>
</html>

※コンソールログを確認してみてください。

仕様

DOM Level 2 Events: MouseEvent.relatedTarget

ブラウザ互換性

Comparison of Event Targets

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。