JS でのイベント委任

イベント委任は、JS でイベントをより効率的に処理するための概念です.イベントバブリングの概念を使用して同じことを実現します.イベント キャプチャの概念も使用できますが、イベント バブリングが推奨される方法です.

アイテムのリストがあるとします.つまり、li 内に ul があり、各 li をクリックすると、何らかのアクションが発生することが予想されます.したがって、一般的なアプローチは、リスト内の各 li にイベント リスナーを追加することです.

HTML

<ul id='list'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  ...
</ul>

イベント委任なし

const items = document.querySelectorAll('#list li');
const handleClick = () => {
  // do something here ...
};

// listener added to each li
items.forEach(item => {
  item.addEventListener('click', handleClick)
});

このアプローチでは、アタッチされたイベント ハンドラーの数は、リストに存在する li の数と同じであり、より多くの JS メモリを消費します.
したがって、この問題を解決するには、ここで Event delegation アプローチを使用できます.

イベント委任あり

const list = document.querySelector('#list');

const handleClick = (event) => {
  if (event.target.tagName === 'LI') {
    // do something here
  }
};

// listener added to ul
list.addEventListener('click', handleClick);

上記のサンプル コードでは、親 ul#list にイベント ハンドラが 1 つだけ追加されています.ハンドラーで、target.tagName が LI の場合、必要なタスクが実行されます.したがって、ハンドラーの数が 1 つに減り、JS メモリの消費量が少なくなります.

event bubbling の詳細については