先生と生徒の会話形式で理解しよう

生徒

「先生、リストのボタンがいっぱいあるんですが、一つずつイベントを設定するのは大変です。何か簡単な方法はありますか？」

先生

「それならイベントデリゲーションを使うと便利です。これは親要素にイベントを設定して、子要素の操作をまとめて管理する方法です。」

生徒

「親に設定して、どうやって子を判別するんですか？」

先生

「イベントオブジェクトのtargetプロパティを使うと、どの子要素が操作されたかを簡単に特定できます。では、実際に見てみましょう！」

1. イベントデリゲーションとは？

イベントデリゲーションとは、親要素にイベントリスナーを設定し、子要素の操作をまとめて処理するテクニックです。通常、ボタンやリンクがたくさんある場合、個別にイベントを設定するとコードが増えますが、デリゲーションを使うと簡単に管理できます。

この方法は、DOMの階層構造とイベントの伝播（バブリング）を利用しています。子要素で発生したイベントが親要素に伝わる性質を活用するのです。

2. 基本的な仕組み

イベントデリゲーションでは、親要素にaddEventListenerでクリックや変更などのイベントを設定します。そして、イベントオブジェクトのtargetを使って、実際に操作された子要素を判別します。


const list = document.getElementById("itemList");

list.addEventListener("click", function(event) {
  const clicked = event.target;
  if(clicked.tagName === "BUTTON") {
    console.log(clicked.textContent + "がクリックされました");
  }
});

この例では、リスト内のすべてのボタンを一つのイベントリスナーで管理しています。tagNameを使ってクリックされた要素がボタンかどうかを判別しています。

3. なぜイベントデリゲーションが便利なのか

ボタンが10個でも100個でも、親要素に一つイベントを設定するだけで済みます。また、動的に追加される要素も自動的に対象になります。これにより、コードが簡潔になり、管理が容易になります。

さらに、イベントリスナーの数を減らすことで、ブラウザの処理効率も向上します。大規模なリストや複雑な画面で特に効果的です。

4. 実践例：動的に追加されるリストでも対応

例えば、新しいアイテムをリストに追加しても、イベントデリゲーションなら自動的にクリック処理が適用されます。


const addItemButton = document.getElementById("addItem");

addItemButton.addEventListener("click", function() {
  const newItem = document.createElement("li");
  const button = document.createElement("button");
  button.textContent = "新しいボタン";
  newItem.appendChild(button);
  list.appendChild(newItem);
});

このようにリストに新しいボタンを追加しても、親要素に設定されたイベントリスナーが自動で処理します。

5. 注意点とコツ

イベントデリゲーションを使うときは、event.targetで正確に子要素を判別することが大切です。例えば、ボタン内のアイコンなどもクリックされた場合に意図しない処理が発生することがあります。その場合はclosest()などを使って、特定の親要素を取得すると安全です。


list.addEventListener("click", function(event) {
  const button = event.target.closest("button");
  if(button) {
    console.log(button.textContent + "がクリックされました");
  }
});