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 の定義
廃止された 初回定義

ブラウザー実装状況

 

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
targetChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

 

互換性のための注記

IE 6-8 では、イベントモデルが異なります。イベントリスナーは、非標準の EventTarget.attachEvent メソッドでアタッチされます。このモデルでは、イベントオブジェクトは target プロパティの代わりに、Event.srcElement プロパティを持っており、意味的には event.target と同じです。

function hide(e) {
  // IE6-8 をサポート
  var target = e.target || e.srcElement;
  target.style.visibility = 'hidden';
}

関連項目