イベントのバブリングにおけるターゲット要素の取得

二つの要素があるとします： div と、そのdivの中にある段落 p です：

<div>
	<p></p>
</div>

divへの参照を変数に取得しましょう：

let div = document.querySelector('div');

タグにスタイルを追加します：

div {
	padding: 20px;
	border: 1px solid red;
}

p {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

ここで、divにクリックイベントハンドラを設定します：

div.addEventListener('click', function() {
	console.log('click');
});

divに padding があるため、 divをクリックするとき、段落（p）の上をクリックする場合と、段落がないdivの部分を直接クリックする場合があります。

このとき、クリックハンドラ内の this は常に、ハンドラが設定された要素（この場合はdiv）を指します：

div.addEventListener('click', function() {
	console.log(this); // div
});

しかし、イベントが実際に発生したタグを取得することができます。これには event.target の中身を確認します：

div.addEventListener('click', function(event) {
	console.log(event.target); // div または p
});

条件分岐を使ってこれら2つのケースを区別できます：

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('div自体がクリックされました');
	}
	if (event.target.tagName === 'P') {
		console.log('段落がクリックされました');
	}
});

tagName の代わりに matches も使用できます：

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('div自体がクリックされました');
	}
	if (event.target.matches('p')) {
		console.log('段落がクリックされました');
	}
});

以下の要素が与えられています：

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

div, ul, li {
	padding: 20px;
}

div {
	border: 1px solid red;
}
ul {
	border: 1px solid orange;
}
li {
	border: 1px solid green;
}

divにクリックイベントハンドラを設定してください。このハンドラ内で、イベントがどのタグで発生したかを判定してください。

前のタスクを修正してください。 li がクリックされたときは、その末尾に感嘆符（!）を追加し、 ul がクリックされたときは、コンソールにその情報を出力するようにしてください。