「closest()」を使用したイベント委任はバニラ JavaScript イベント処理をどのように最適化できますか?

バニラ JavaScript イベント委任: 効率的で適切なアプローチ

イベント委任は、イベント リスナーをアタッチできる JavaScript の一般的な手法です。単一の親要素とその子要素にイベント処理を委任します。このアプローチにより、個々の子に対する冗長なイベント リスナーの作成が回避され、パフォーマンスが大幅に向上します。

バニラ JavaScript でイベント委任を実装する一般的な方法の 1 つは、addEventListener() メソッドを使用することです。ただし、質問で言及されている実装は、#main のすべての子を走査することを伴うため、パフォーマンスが最適ではありません。

より効率的な代替方法は、クリックされた要素が存在するかどうかをチェックする close() メソッドを利用することです。指定されたセレクターに一致する親要素があります。これにより、イベントをより正確かつ効率的に委任できるようになります。

たとえば、closest() を使用して jQuery イベント ハンドラーをバニラ JavaScript に変換するには、

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

このコードでは、最初に選択します。 #main 要素を追加し、「click」イベントのイベント リスナーを追加します。クリックが発生すると、closest() を使用して、クリックされた要素に '.focused' クラスの親要素があるかどうかを確認します。存在する場合は、settingsPanel() 関数を呼び出します。

このアプローチは、必要な要素のみをチェックし、#main のすべての子を反復処理する必要がないため、効率的です。さらに、ターゲット要素を直接参照することで、脆弱な依存関係を軽減します。

深くネストされた構造を操作する場合、内部セレクターが親要素にならないようにすることで、パフォーマンスをさらに最適化できます。このアプローチに関するライブ デモと追加の詳細は、指定された参考資料に記載されています。

以上が「closest()」を使用したイベント委任はバニラ JavaScript イベント処理をどのように最適化できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。