JavaScriptのイベントデリゲーションの仕組みと実践例

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

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

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

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

2. 基本的な仕組み

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. なぜイベントデリゲーションが便利なのか

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

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

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

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

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. 注意点とコツ

5. 注意点とコツ

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

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

6. 練習のすすめ

6. 練習のすすめ

まずは簡単なリストを作り、ボタンを数個設置してイベントデリゲーションを試してみましょう。その後、新しいアイテムを追加しても動作することを確認します。こうすることで、イベントデリゲーションの仕組みと便利さを体感できます。