JavaScriptにおける汎用イベントデリゲーション

前のレッスンで示したコードは機能しますが、欠点がないわけではありません。これらの欠点を分析し、より汎用的な解決策を書いてみましょう。

私たちのコードの欠点は、li タグ内に何かネストされたタグがある場合に明らかになります。今回のケースでは、i タグがあるとしましょう：

<ul>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
</ul>

この場合、i タグをクリックすると、感嘆符が li タグの末尾ではなく、i タグの末尾 に追加されてしまいます。これは、event.target に取得されるのは、まさにイベントが発生したタグだからです。

この問題は、closest メソッドを使用して解決できます：

list.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		li.innerHTML = li.innerHTML + '!';
	}
});

上記の解決策を実装してみてください。