JS
イベント委譲
上級読み方：イベントいじょう｜英語：Event Delegation
親要素にイベントリスナーを設定し、子要素のイベントをまとめて処理するテクニック。
やさしい説明
イベント委譲は、たくさんの子要素のイベントを親要素1つで処理するテクニックです。
リストの各項目にリスナーを付ける代わりに、親のulに1つだけ付けて、クリックされた子要素を判定します。
具体例・使い方
ul.addEventListener('click', e => { if(e.target.tagName === 'LI') ... })
動的に追加された要素にも自動で対応できるメリットがある
よくある疑問
Q: イベント委譲のメリットは？
A: 動的に追加された要素にも対応でき、リスナーの数を減らしてパフォーマンスが向上します。
関連用語
📖 関連レッスン
レッスンを見る →