dom_dom0900_002

Todoリストから項目を削除する際に「イベント委譲」を使う主な利点はどれですか？

  1. CSSの指定が不要になる
  2. メモリ消費が増えるが速度が上がる
  3. 追加される各<li>に個別のリスナーを付けずに済む
  4. DOMの再計算（reflow）を防げる
正解
  1. 追加される各<li>に個別のリスナーを付けずに済む
解説

親要素（例：<ul>）に1つだけリスナーを置き、event.targetからクリックされた子を判定します。動的に増える要素それぞれにリスナーを付ける必要がなく、保守・性能面で有利です。

使用例（サンプルコード）

[ html ]

<ul id="todo"></ul>
<script>
const ul = document.getElementById('todo');
// 例として既存項目
ul.innerHTML = `<li>Task A <button class="del">x</button></li>`;
ul.addEventListener('click', (e) => {
  if (e.target.matches('.del')) {
    e.target.closest('li').remove();
  }
});
</script>