JavaScriptのイベント委任（Event Delegation）とは？使い方と活用すべき理由を徹底解説

本記事では、JavaScriptにおけるイベント委任（イベントデリゲーション）の概要、その利点、そして具体的な実装方法について詳しく解説します。

JavaScriptのイベント委任とは？いつ使うべき？

簡単に言うと、イベント委任とは、親要素にたった1つのイベントリスナーを設定するだけで、子要素とやり取りできるJavaScriptの手法です。イベント委任を使えば、すべての子要素に個別にイベントハンドラーを追加する必要がなくなりながらも、子要素を検出して自由に操作できます。

この手法がなぜ強力なのかは、この後すぐにわかります。

例えば、リストの中に複数の項目があるとします。ユーザーがいずれかのリスト項目をクリックしたときに、何らかの処理を実行したいケースを考えてみましょう。

ここでは、それを実現する2つの異なる方法を比較しながら見ていきます。

方法①：各要素に個別にイベントリスナーを設定する

リスト内の個々の要素にアクセスする一般的な方法は、forループなどで要素を順番に処理し、それぞれの要素にイベントリスナーを設定することです。

let allExerciseItems = document.querySelectorAll(".exercise-item")

for (let exerciseItem of allExerciseItems) {
  exerciseItem.addEventListener("click", function(event) {
    // ターゲットの子要素に対して処理を行う
    event.target.classList.toggle("exercise-complete")
  });
}

動作例

CodePenでサンプルを確認する

方法②：イベント委任でアイテムにアクセスする

イベント委任は、先ほどのforループの例とはまったく異なるアプローチです。アクセスしたい各要素を一つずつ反復処理する代わりに、以下のように親要素だけをターゲットにします。

// 親要素を取得し、クリックイベントリスナーを追加
document.querySelector(".exercise-list").addEventListener("click", function(event) {
  if(event.target.classList.contains('exercise-item')) {
    // ターゲットの子要素に対して処理を行う
    event.target.classList.toggle('exercise-complete')
  }
})

補足： classList.contains の代わりに matches() メソッドを使うと、より柔軟なセレクター指定が可能になります。

ご覧のとおり、実行結果はまったく同じです。どちらの方法でも、エクササイズ項目をクリックすると exercise-complete クラスが切り替わります。異なるのは、その結果を達成するための手法です。

では、なぜ「イベントハンドリング＋forループ」方式ではなく、イベント委任を使うべきなのでしょうか？次はその理由について掘り下げていきます。

イベント委任とパフォーマンスの関係

1日、1時間、あるいは1分ごとに数百〜数千もの動的要素が生成されるWebアプリケーションを想像してみてください。例えば、ホテル予約のための予約カレンダーや、最適なユーザー体験のために頻繁なリアルタイム更新が求められるTwitterのようなSNSプラットフォームなどが挙げられます。

Web UI上のすべての要素にイベントリスナーが設定されていると、こうしたシナリオでは瞬く間にハードウェアへの負荷が高まってしまいます。

大量のイベントリスナーはユーザーのCPUリソースを占有し、膨大な数の関数参照がメモリ上に蓄積される原因となります。その結果、メモリリークや全体的なパフォーマンス低下を引き起こしかねません。

筆者自身はGC（ガベージコレクション）の専門家ではありません。主にJavaScriptという高水準言語を扱ってきたためです。しかし、確かなことが1つあります。ブラウザのGCは、ChromeやFirefoxなど多数のベンダーブラウザの違い、さらにスマートフォンやノートPCなど多様なデバイスの存在により、挙動が予測しにくいということです。

ガベージコレクション（GC）とは

簡単に言うと、ガベージコレクションはコンピュータのメモリ管理機構の一種です。ガベージコレクターは、メモリを占有し続ける古いコードや未使用のコードを検出して解放します。プログラミング言語やシステムごとに、さまざまな種類のガベージコレクターが存在します。

先ほどのループの例のように、あらゆる要素にイベントリスナーを設定すると、Webアプリが必要とするガベージコレクションの量が増加します。これはほぼ間違いなくパフォーマンスの低下につながります。

結論として、すべての子要素に個別にイベントリスナーを設定するよりも、親要素に1つのイベントリスナーを設置して子要素へのすべてのクリックを監視する方が、一般的にパフォーマンス面で優れています。