イベント伝播とデリゲーションの解説

イベント伝播

イベント伝播は、イベントが発生した後にDOM内をどのように移動するかを説明し、キャプチャリング、ターゲット、バブリングの3つの明確なフェーズがあります。

キャプチャリングフェーズ（Capture）

イベントはDOMツリーのルート（window）から開始し、ターゲット要素に向かって下方向に移動します。このフェーズでは、イベントリスナーがイベントを下方向に伝播する際にキャッチします。

ターゲットフェーズ

イベントがターゲット要素（イベントを発生させた要素）に到達します。この段階で、ターゲット要素自体に設定されたイベントリスナーが実行されます。

バブリングフェーズ（Bubble）

ターゲット要素に到達した後、イベントはDOMツリーをルート（window）に向かって上方向に移動し、親要素をバブリングします。これは最も一般的に使用されるフェーズであり、親要素が子要素によって発生したイベントに反応できるようになります。

button がクリックされると、イベントは DOM を伝播します。最初にイベントは button で発生します（ターゲットフェーズ）、その後、内側の div にバブルアップし、最終的に外側の div へと伝播します（バブリングフェーズ）。

イベントデリゲーション

イベントデリゲーション は、イベント伝播を利用して、親要素に単一のイベントリスナーを設定し、子要素から発生するイベントを処理する手法です。各子要素に個別のリスナーを付与する代わりに、親要素が子要素からバブルアップしてくるイベントを監視します。 この手法には主に2つの利点があります：

1. パフォーマンス：イベントリスナーの数を減らすことでパフォーマンスが向上します。特に要素が動的に生成される場合（例：新しい項目が追加されてリストが拡張される場合）に有効です；
2. 保守性：大規模な DOM 構造や動的コンテンツを扱う際に、イベントデリゲーションによってコードが簡素化されます。

それぞれの button 要素にクリックリスナーを個別に追加する代わりに、1つのリスナーを div 親要素に追加します。イベントは button 要素から div へバブリングし、そこで処理されます。

悪いアプローチ

良いアプローチ

実践例：動的リストの操作

イベントデリゲーションは、時間の経過とともに増減するリストやテーブル（例：ToDoリストへのタスク追加やショッピングカートへの商品追加）の操作管理に最適。アイテムが追加・削除されても、親コンテナ（ulやtableなど）がすべての操作を管理するため、各子要素ごとにリスナーを付けたり外したりする必要がなくなる。