Vanilla JavaScript イベント委任は、複数の個別のイベント リスナーに対するパフォーマンスをどのように向上させますか?

バニラ JavaScript イベント委任: 詳細な分析

背景

イベント委任は、異なるイベント リスナーにアタッチされた複数のイベント リスナーの処理を簡素化するために使用される手法です。 DOM 構造内の要素。バニラ JavaScript では、これは .addEventListener() を使用して実現できます。

バニラ JS でのイベント委任

質問で提供されている jQuery の例を翻訳するには:

$('#main').on('click', '.focused', function() {
    settingsPanel();
});

...バニラ JavaScript では、次のようになります:

document.querySelector('#main').addEventListener('click', (e) => {
  if (e.target.closest('#main .focused')) {
    settingsPanel();
  }
});

改善解決策

ただし、パフォーマンスを最適化し、過度の DOM トラバーサルを避けるために、内部セレクターのみを .closest():

document.querySelector('#main').addEventListener('click', (e) => {
  if (e.target.closest('.focused')) {
    settingsPanel();
  }
});

コード構造の簡素化

に渡すことをお勧めします。読みやすくするために、早期リターン内の状態をチェックするのが一般的ですステートメント:

document.querySelector('#main').addEventListener('click', (e) => {
  if (!e.target.closest('.focused')) {
    return;
  }
  // Remaining code of settingsPanel here
});

パフォーマンスの比較

質問で提供されている代替ソリューション (document.getElementById('main').addEventListener('click', doThis);) と比較すると、これはこのメソッドはイベント バブリングを採用し、内部の多数の子要素の反復処理を回避するため、パフォーマンスが向上します。 #main.

ライブ デモ

違いを説明するには、回答で提供されているライブ デモのスニペットを参照してください。内部要素 (#inner) をクリックすると、バニラ JavaScript イベント ハンドラーと jQuery イベント ハンドラーの両方が、それぞれのメッセージをコンソールに記録します。

以上がVanilla JavaScript イベント委任は、複数の個別のイベント リスナーに対するパフォーマンスをどのように向上させますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。