1つのリスナーで全行を捌く

01 / 03

100行に100個のリスナー？

ch1 では li を作るたびに addEventListener を書いていた。5行なら5つ。でも100行になったら100個？

じつは、もっと簡単な方法がある。親（#list）に1つだけリスナーを付けて、誰が押されたかを見分けるんだ。これをイベント委譲（delegation）と呼ぶよ。

02 / 03

ボタンが押されると、そのイベントは親へ親へと伝わっていく。#list に付けたリスナーにも届くんだ。

そのとき event.target を見ると、実際に押された要素が分かる。押されたのが done ボタンかどうかを調べれば、行を消すか何もしないかを決められるよ。

list.addEventListener("click", (event) => {  console.log(event.target) // 押されたもの})

03 / 03

event.target が必ず .done とは限らない。ボタンの中のテキストが target になることもある。

そこで event.target.closest(".done") を使う。自分自身を含めて、上に向かっていちばん近い .done を探すメソッドだよ。見つからなければ null が返るので、ガードで弾ける。

list.addEventListener("click", (event) => {  const btn = event.target.closest(".done")  if (!btn) return  btn.closest("li").remove()})