Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

トップページ
JavaScript辞典
event.target / currentTarget

event.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』の値に応じて処理を分岐するといった使い方ができます。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス