イベント委譲とは

イベント委譲とは、子要素それぞれにイベントを登録するのではなく、親要素1つにイベントを登録し、どの要素が操作されたかをevent.target などを使って判定する仕組みです。

テーブル表やリストなどで複数の子要素に同じ処理を行いたい場合や、DOM操作によって要素が動的に追加される場合にイベント委譲を利用すると、ブラウザの負担を減らすことができパフォーマンス面でも有利になります。

基本的な書き方

HTML

<ul>
 <li>クリック</li>
 <li>クリック</li>
 <li>クリック</li>
</ul>

JavaScript

ul.addEventListener("click", function (e) { // 親要素に登録
　if (e.target.closest("li")) { // クリックされた要素が li か判定
　　// 実行する内容
　}
});

なぜ親要素に登録するのか

イベント委譲は、子要素で発生したイベントが親要素へ伝わる「バブリング」の仕組みを利用しています。

この方法を使うことで、子要素ごとにイベントを登録する必要がなくなります。

また、後からDOM操作で子要素が追加された場合でも、すでに親要素にイベントが登録されているため、新しく追加された要素にも同じイベントが適用されます。

具体例

管理画面の一覧ページでは、各行に「編集」「登録」「削除」などのボタンが並び、1ページ内に多くのイベントを設定しなければならないことがあります。このような場面で活用したいのが、イベント委譲です。

最初は少し難しく感じるかもしれませんが、イベント委譲を理解すると、複雑な画面でもシンプルなコードで実装ができるようになります。