DOMおれおれAdvent Calendar 2015 – 19日目分

2015-12-19

イベントのコールバック実行時、 this が監視対象の要素になるんですが、引数で与えられるEventオブジェクトからも得る事ができます。

<div id="wrapper">
  <button id="button"></button>
</div>

var el = document.querySelector('#wrapper');
el.addEventListener('click', function(event) {
  console.log(this.id, event.target.id, event.currentTarget.id);
});

event.currentTarget

event.currentTarget が this と同じになります。（なので、よく bind() で this は違うものにしたりします。）

event.target

event.target は最初にイベントが起こった要素です。上記の例だと監視しているのは <div> です。その要素内の <button> をクリックした場合、 event.target はクリックした <button> 、 event.currentTarget は監視している <div> になります。

event.relatedTarget

他に関連する要素を格納しています。マウス操作のイベントにのみ設定されます。 focus や mouseenter のイベントで、「どこから移動してきたか」「どこへ移動したか」を示したります。

<input id="text-1" type="text" />
<input id="text-2" type="text" />

var el = document.querySelector('#text-1');
el.addEventListener('focus', function(event) {
    console.log('from:', event.relatedTarget);
});
el.addEventListener('focusout', function(event) {
    console.log('to:', event.relatedTarget);
});

使った事ないです。古いIEでも使えますが、Firefoxが頑なに実装してません。（？）

参考