JavaScriptのイベントデリゲーションの使い方

📌

結論

イベントデリゲーションで動的要素のイベントも捕捉できます

📝 実際のコードはこちら

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    e.target.remove();
  }
});

親要素にイベントを1つ付けるだけで、後から追加された子要素のイベントも捕捉できます。

まとめ

・親にイベントを付けて子のイベントを捕捉・動的に追加される要素にも対応・e.target でクリックされた要素を判別

イベントデリゲーションを試してみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

idがlistの要素のクリックイベントをリッスンし、クリックされたliのtextContentをconsole.logで出力してください。

詰まったらヒント

e.targetでクリックされた要素を取得。tagNameでliか判定