P粉5936497152023-08-23 00:01:17
DOM イベント委任は、各子要素ではなく単一の共通の親要素を通じて UI イベントに応答するメカニズムであり、イベントの「バブル」(イベントの伝播とも呼ばれる) の魔法によって実現されます。
要素でイベントがトリガーされると、 次のことが起こります :
イベント バブリングは、ブラウザーでのイベント委任の基礎を提供します。イベント ハンドラーを単一の親要素にバインドできるようになり、その子ノードのいずれかでイベントが発生するたびに、ハンドラーが (その子とともに) 実行されます。 これはイベントの委任です。 これが実際の例です:
リーリーこの例では、子 <li> ノードのいずれかをクリックすると、 Click ハンドラー バインディングがなくても、"click!" 警告が表示されます。 <li> に。 onclick="..." を各 <li> にバインドすると、同じ効果が得られます。
それでは、どのようなメリットがあるのでしょうか?
DOM 操作を通じて、新しい <li> 項目を上記のリストに動的に追加する必要があるとします。
イベント委任を使用しない場合は、その兄弟との一貫性を保つために、"onclick" イベント ハンドラーを新しい <li> 要素に再バインドする必要があります。性能も同じです。イベント委任を使用すると、何もする必要はありません。新しい <li> をリストに追加するだけで完了です。
これは、新しい要素が動的に作成されたり、DOM から削除されたりする、多くの要素にバインドされたイベント ハンドラーを持つ Web アプリケーションに最適です。イベント委任を使用すると、イベント バインディングの数を大幅に削減して共通の親要素に移動でき、要素を動的に作成するコードを、要素をバインドするイベント ハンドラーのロジックから切り離すことができます。
イベント委任のもう 1 つの利点は、イベント リスナーによって使用される合計メモリ フットプリントが削減されることです (イベント バインディングの数が減少するため)。頻繁にアンロードされる小さなページ (つまり、ユーザーが頻繁に別のページに移動する) の場合、これは大きな影響を及ぼさない可能性があります。しかし、長期間存続するアプリケーションにとっては、それが重要になる可能性があります。要素が DOM から削除されてもまだメモリを占有している (つまり、リークしている) という追跡が非常に困難なケースがいくつかあり、多くの場合、このリークしたメモリはイベント バインディングに関連しています。イベント委任を使用すると、イベント リスナーの「バインド解除」を忘れることを心配することなく、子要素を自由に破棄できます (リスナーは祖先要素上にあるため)。このような種類のメモリ リークは、抑えることができます (完全になくすことはできませんが、それは非常に難しい場合があります。つまり、私はあなたのことを考えています)。
ここでは、より優れたイベント委任の具体的なコード例をいくつか示します:
focusandblurEvent によって発見された興味深いメソッド (バブルしません)