イベントオブジェクト.target / currentTarget 対応: DOM Level 2（2000）

イベントオブジェクトのプロパティで、イベントが発生したHTML要素やイベントの種類を取得できます。イベントリスナーのコールバック関数に渡されるイベントオブジェクトから参照します。

構文

element.addEventListener("イベント名", function(e) {
	e.target;        // イベントが実際に発生したHTML要素
	e.currentTarget; // イベントリスナーが登録されているHTML要素
	e.type;          // イベントの種類
});

プロパティ一覧

プロパティ	概要
event.target	イベントが実際に発生したHTML要素を返します。クリックされたHTML要素そのものが返されるため、子要素がクリックされた場合はその子要素になります。
event.currentTarget	イベントリスナーが登録されているHTML要素を返します。イベントがバブリングしても常にリスナーが登録されたHTML要素が返されます。
event.type	発生したイベントの種類を文字列で返します。『click』『input』『submit』などの値が返されます。

サンプルコード

<div id="container">
	<button id="btn"><span>クリック</span></button>
</div>
<p id="output"></p>

var container = document.querySelector("#container");
var output = document.querySelector("#output");

// containerにクリックイベントを登録します。
container.addEventListener("click", function(e) {
	// target はクリックされたHTML要素そのものです。
	console.log("target: " + e.target.tagName);

	// currentTarget はリスナーが登録されたHTML要素です。
	console.log("currentTarget: " + e.currentTarget.tagName);

	// type はイベントの種類です。
	console.log("type: " + e.type);

	output.textContent = "target=" + e.target.tagName + ", currentTarget=" + e.currentTarget.tagName;
});

実行結果

ボタン内の『<span>』部分をクリックした場合、『target』は実際にクリックされた『<span>』になりますが、『currentTarget』はリスナーが登録された『<div>』になります。

// <span>をクリックした場合
target: SPAN            // 実際にクリックされたHTML要素
currentTarget: DIV      // リスナーが登録されたHTML要素
type: click             // イベントの種類

<p id="output">target=SPAN, currentTarget=DIV</p>

概要

『event.target』と『event.currentTarget』の違いは、イベントのバブリング（子要素から親要素への伝播）を理解すると明確になります。子要素がクリックされたとき、イベントは子要素から親要素へと伝わります。このとき『event.target』は実際にクリックされた子要素を指し、『event.currentTarget』はリスナーが登録された親要素を指します。

イベント委任のパターンでは、親要素にリスナーを登録しておき、『event.target』でクリックされた子要素を判別して処理を分岐します。この手法は『HTML要素.closest()』と組み合わせるとさらに強力で、動的に追加されたHTML要素にも対応できます。

『event.type』は1つの関数で複数のイベントを処理する場合に便利です。例えば『mouseover』と『mouseout』を同じ関数で処理し、『event.type』の値に応じて処理を分岐するといった使い方ができます。