Event.currentTarget

イベントは DOM を横断するので、イベントの現在のターゲットを識別します。イベントが発生した要素を特定する event.target とは対照的に、常にイベントハンドラがアタッチされた要素を参照します。

event.currentTarget は、同じイベントハンドラを複数の要素にアタッチしているときに使用すると興味深いです。

function hide(e){
  e.currentTarget.style.visibility = "hidden";
  // この関数がイベントハンドラとして使用されるとき: this === e.currentTarget
}

var ps = document.getElementsByTagName('p');

for(var i = 0; i < ps.length; i++){
  ps[i].addEventListener('click', hide, false);
}

// 周辺をクリックすると段落が消えます。

仕様

仕様 状態 コメント
Document Object Model (DOM) Level 2 Events Specification
The definition of 'Event.currentTarget' in that specification.
勧告 Initial definition

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) (有)[1] (有) ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

[1] Internet Explorer 6 から 8 では、イベントモデルが異なります。イベントリスナは非標準の element.attachEvent メソッドでアタッチされます。このモデルでは、event.currentTarget と同等の機能はなく、this はグローバルオブジェクトです。event.currentTarget 機能をエミュレートするための 1 つの解決策は、ハンドラを最初の引数として要素とともに Function.prototype.call を使用するハンドラを呼び出す関数でラップすることです。この方法であれば、 this は予想通りの値になります。

関連項目

Comparison of Event Targets

ドキュメントのタグと貢献者

 このページの貢献者: YuichiNukiyama
 最終更新者: YuichiNukiyama,