Vanilla JavaScript でイベント委任を効果的に実装するにはどうすればよいですか?

バニラ JavaScript でのイベント委任: 総合ガイド

バニラ JavaScript でイベント委任を実現すると、イベント リスナーを処理する効率的で保守可能な方法が提供されます。組み込みプロトタイプの変更を伴う jQuery のイベント委任とは異なり、バニラ JavaScript は、「.closest()」によるイベント委任の使用を通じて、より堅牢なアプローチを提供します。

jQuery イベント委任をバニラ JavaScript に変換する

jQuery を翻訳するには例:

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

バニラ JavaScript では、次を使用します:

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

「.closest()」メソッドは、クリックされた要素に「.focused」と一致する親要素があるかどうかを確認します。 'セレクター。存在する場合、'settingsPanel()' 関数を呼び出します。

複雑なイベント チェーンの最適化

パフォーマンスを向上させるには、特にネストされた要素を扱う場合、早期リターン:

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

このアプローチは、'.focused' セレクターが使用されている場合に不要なコードの実行を防ぎます。

ライブ デモンストレーション

次のコード スニペットは、'.closest()' でバニラ JavaScript のイベント委任を使用する方法を示しています。

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

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

この例では、「#inner」要素をクリックすると「vanilla」がコンソールに記録されます。バニラ JavaScript のイベント委任。

以上がVanilla JavaScript でイベント委任を効果的に実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。