e.targetとe.currentTargetの違い

e.targetとe.currentTargetの違いについて少し調べる機会があったのでメモ。

サンプルコード

HTML

<a href="/" class="link">リンク1</a>
<a href="/" class="link"><span class="span">リンク2(中にspan)</span></a>

JavaScript

$(function() {
	$('a').on('click', function(e) {
		e.preventDefault();
		console.log('target:', e.target);
		console.log('currentTarget:', e.currentTarget);
	});
});

リンク1の場合は両方とも同じ対象になりますが、リンク2の場合は対象が異なります。
e.targetとe.currentTargetの違いのデモページ
e.targetはイベントを発生させた要素、e.currentTargetはイベントハンドラがアタッチされた要素になるようです。
　

【参考サイト】

• Event.target – Web API インターフェイス | MDN
• Event.currentTarget – Web API インターフェイス | MDN