イベントオブジェクト.target / currentTarget

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

sample_eventTarget.html

<div id="container">
	<button id="btn"><span>クリック</span></button>
</div>
<p id="output"></p>
<ul id="fighter-list">
	<li data-fighter="iori"><span>八神庵</span></li>
	<li data-fighter="kyo"><span>草薙京</span></li>
	<li data-fighter="terry"><span>テリー・ボガード</span></li>
</ul>
<form id="login-form">
	<input type="text" name="username" placeholder="ユーザー名">
	<button type="submit">ログイン</button>
</form>

sample_eventTarget.js

// パターン1: e.target / e.currentTarget / e.type の基本
var container = document.getElementById("container");
var output = document.getElementById("output");
container.addEventListener("click", function(e) {
	console.log("target: " + e.target.tagName);         // 実際にクリックされた要素
	console.log("currentTarget: " + e.currentTarget.tagName); // リスナー登録先
	console.log("type: " + e.type);                     // 『click』と出力されます。
	output.textContent = "target=" + e.target.tagName + ", currentTarget=" + e.currentTarget.tagName;
});
// span をクリックした場合: target=SPAN, currentTarget=DIV

// パターン2: e.target を使ったイベント委任（動的HTML要素にも対応）
var fighterList = document.getElementById("fighter-list");
fighterList.addEventListener("click", function(e) {
	// クリックされた要素がliでなくその中のspanであっても、closest()でliを取得します。
	var li = e.target.closest("li");
	if (!li) { return; }
	console.log("選択: " + li.getAttribute("data-fighter"));
	// 「iori」「kyo」「terry」のいずれかが出力されます。
});

// パターン3: フォーム送信でe.targetからフォームデータを取得する
var form = document.getElementById("login-form");
form.addEventListener("submit", function(e) {
	e.preventDefault(); // ページ遷移を防ぎます。
	var username = e.target.querySelector("[name='username']").value;
	console.log("ログイン試行: " + username);
	console.log("フォームのid: " + e.currentTarget.id); // 『login-form』と出力されます。
});

サンプルページはこちら

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