We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

イベントを発生させたオブジェクトへの参照です。 イベントハンドラーがバブリング、またはキャプチャフェーズの間に呼び出されたとき、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> 要素を参照します
  // これはコンテキスト内の親 <li> を参照する 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 の定義
廃止された 初回定義

ブラウザー実装状況

 

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり ?

 

互換性のための注記

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';
}

関連項目

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

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