イベント委任はバニラ JavaScript のパフォーマンスとコードの単純さをどのように改善できるでしょうか?

バニラ JavaScript によるイベント委任

バニラ JavaScript では、イベント委任は、イベント リスナーを単一の親要素にアタッチするために使用される手法です。その中の個々の要素。このアプローチにより、複数のイベント リスナーの必要性がなくなり、コードが簡素化されるため、パフォーマンスが向上します。

効果的なイベント委任

イベント委任を効率的に実装するには、次の手順を使用します。

1. イベントが発生する親要素を見つけます。
2. 目的のイベント タイプ (クリックなど) の親要素にイベント リスナーを追加します。
3. イベント ハンドラー内で、クリックされた要素が特定のセレクターまたはその親と一致するかどうかを確認します。要素がセレクターと一致します。
4. 条件が満たされた場合、目的の関数を実行するか、 action.

例: jQuery コードの委任

次の jQuery コードを考えてみましょう:

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

このコードをバニラ JavaScript に変換するには、次を使用します:

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

このコードでは、次を使用します。 querySelector() を使用して、ID が main の親要素を検索し、それにクリック イベント リスナーをアタッチします。この親内の要素がクリックされると、クリックされた要素またはその親要素のいずれかに .focused クラスがあるかどうかがチェックされます。存在する場合、settingsPanel() 関数を呼び出します。

委任の利点:

• パフォーマンスの向上: 複数の関数が不要になります。イベント リスナー、イベント処理の数を減らす関数。
• コードの簡略化: 各要素に個別のイベント リスナーを使用する場合と比較して、保守と理解が容易です。
• 柔軟性: 動的バインディングが可能セレクターに基づいてイベント ハンドラーを作成し、追加または削除される要素からのイベントを処理できるようにします。動的に。

以上がイベント委任はバニラ JavaScript のパフォーマンスとコードの単純さをどのように改善できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。