relatedElement のお話

Event.relatedElement

Event の relatedElement は、何かしらのイベントがエレメント A で発生した場合の、発生のトリガーとなったエレメント。

例えばエレメント B がエレメント A を内包している HTML ドキュメントにおいて、エレメント A に mouseover イベントが設定されている場合、マウスオーバーを検知した Event の relatedElement は通常エレメント B となる。

<div id="B">
    <p id="A">hogehoge</p>
</div>

document.getElementById("A").addEventListener("click", function(e){
    alert(e.relatedElement);    // id="B"のエレメント
}, false);

またこのイベントがエレメント B で発生した場合、エレメント B を囲うエレメントが他になければ最上位の html が relatedElement となる。
更にエレメント A へのマウスオーバー時、エレメント B へマウスオーバーしないで直接エレメント A でイベントが発生した場合も A の relatedElement は html （または null）である。

これを利用する事で上位にあるエレメントだけを監視するイベントを作る事ができる。