JavaScriptのEventオブジェクトにおけるイベント要素

オブジェクト Event は、イベントが発生した要素を取得することも可能にします。この要素はプロパティ target に含まれています。 this にこの要素が含まれているのに、なぜこれが必要なのでしょうか？

実際のところ、this は常に イベントがバインドされた要素を含みますが、プロパティ target は実際にクリックされた要素を含みます。この実際の要素は this と一致することもあれば、一致しないこともあります。

例を見てみましょう。 div とその中に段落があるとします：

<div id="elem">
	<p>text</p>
</div>

divにイベントをバインドしますが、段落をクリックします。段落はdivの中に含まれているため、段落のクリックは同時にdivのクリックでもあることは明らかです。

上記の場合、プロパティ target には、イベントが発生した最終的なタグ、つまりdivではなく段落が含まれることになります。これを確認してみましょう：

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // 段落を出力します
	console.log(this);         // divを出力します
});

タグ li を持つリスト ul があるとします：

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

タグ ul にクリックハンドラーをバインドします。このハンドラー内で、プロパティ tagName を使用して、どのタグがクリックされたかを確認してください。クリックが li タグ上で行われた場合、そのタグのテキストの末尾に感嘆符を追加してください。クリックが ul タグ上で行われた場合は、その情報をコンソールに出力してください。