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

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

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

html<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 メソッドを使用して解決できます：

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