Event.target
イベントを発生させたオブジェクトへの参照です。 イベントハンドラーがバブリング、またはキャプチャフェーズの間に呼び出されたとき、event.currentTarget
とは異なります。
構文
theTarget = event.target
例
event.target
プロパティは、イベントデリゲーションを実装するために使用できます。
// リストを作ります
var ul = document.createElement('ul');
document.body.appendChild(ul);
var li1 = document.createElement('li');
var li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);
function hide(e){
// e.target はクリックされた <li> 要素を参照します
// これはコンテキスト内の親 <ul> を参照する e.currentTarget とは異なります
e.target.style.visibility = 'hidden';
}
// リストにリスナーを接続します
// <li> がクリックされた時に発火します
ul.addEventListener('click', hide, false);
仕様
仕様 | 状態 | コメント |
---|---|---|
DOM Event.target の定義 |
現行の標準 | |
DOM4 Event.target の定義 |
廃止 | |
Document Object Model (DOM) Level 2 Events Specification Event.target の定義 |
廃止 | 初回定義 |
ブラウザー実装状況
BCD tables only load in the browser
互換性のための注記
IE 6-8 では、イベントモデルが異なります。イベントリスナーは、非標準の EventTarget.attachEvent
メソッドでアタッチされます。このモデルでは、イベントオブジェクトは target
プロパティの代わりに、Event.srcElement
(en-US) プロパティを持っており、意味的には event.target
と同じです。
function hide(e) {
// IE6-8 をサポート
var target = e.target || e.srcElement;
target.style.visibility = 'hidden';
}