Vanilla JavaScript イベント委任は、最適なパフォーマンスを実現するための jQuery のアプローチとどのように比較されますか?

最適なパフォーマンスを実現するバニラ JavaScript でのイベント委任

jQuery 構文の再確認

jQuery では、次のコードを使用してイベント委任を実現できます。

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

バニラへの翻訳JavaScript

バニラ JavaScript でのイベント委任の利用は、addEventListener を通じて実現できます。ただし、効率を高めるためにアプローチを最適化することが重要です。次の代替案を検討してください。

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

closest() を利用することで、クリックされた要素またはその先祖のいずれかが .focused セレクターと一致するかどうかを確認します。これにより、子要素を非効率的に反復する必要がなくなります。

コードをコンパクトに保つ​​

コードのコンパクトさを高めるために、メイン ロジックを初期の return ステートメントの下に配置できます。

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

  // Code of settingsPanel here
});

実装例

次のコードは、アプローチ:

document.querySelector('#outer').addEventListener('click', (e) => {
  if (!e.target.closest('#inner')) {
    return;
  }
  console.log('vanilla');
});

$('#outer').on('click', '#inner', () => {
  console.log('jQuery');
});

バニラ JavaScript と jQuery イベント ハンドラーの両方で要素を操作するときの出力を観察します。

以上がVanilla JavaScript イベント委任は、最適なパフォーマンスを実現するための jQuery のアプローチとどのように比較されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。