--- title: Event.target slug: Web/API/Event/target tags: - API - DOM - Event - Property - Reference - delegation - target translation_of: Web/API/Event/target ---

{{ApiRef("DOM")}}

イベントを発生させたオブジェクトへの参照です。 イベントハンドラーがバブリング、またはキャプチャフェーズの間に呼び出されたとき、{{domxref("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);

 

仕様

 

仕様 状態 コメント
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} {{Spec2("DOM WHATWG")}}  
{{SpecName("DOM4", "#dom-event-target", "Event.target")}} {{Spec2("DOM4")}}  
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}} {{Spec2("DOM2 Events")}} 初回定義

ブラウザー実装状況

 

{{Compat("api.Event.target")}}

 

互換性のための注記

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

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

関連項目