DOM イベント委任の定義と説明

Question

誰かが JavaScript のイベント委任とその機能を説明してもらえますか?

Answer 1

DOM イベント委任は、各子要素ではなく単一の共通の親要素を通じて UI イベントに応答するメカニズムであり、イベントの「バブル」(イベントの伝播とも呼ばれる) の魔法によって実現されます。

要素でイベントがトリガーされると、 次のことが起こります :

イベント バブリングは、ブラウザーでのイベント委任の基礎を提供します。イベント ハンドラーを単一の親要素にバインドできるようになり、その子ノードのいずれかでイベントが発生するたびに、ハンドラーが (その子とともに) 実行されます。 これはイベントの委任です。 これが実際の例です:

リーリー

この例では、子 <li> ノードのいずれかをクリックすると、 Click ハンドラー バインディングがなくても、"click!" 警告が表示されます。 <li> に。 onclick="..." を各 <li> にバインドすると、同じ効果が得られます。

それでは、どのようなメリットがあるのでしょうか?

DOM 操作を通じて、新しい <li> 項目を上記のリストに動的に追加する必要があるとします。

リーリー

イベント委任を使用しない場合は、その兄弟との一貫性を保つために、"onclick" イベント ハンドラーを新しい <li> 要素に再バインドする必要があります。性能も同じです。イベント委任を使用すると、何もする必要はありません。新しい <li> をリストに追加するだけで完了です。

これは、新しい要素が動的に作成されたり、DOM から削除されたりする、多くの要素にバインドされたイベント ハンドラーを持つ Web アプリケーションに最適です。イベント委任を使用すると、イベント バインディングの数を大幅に削減して共通の親要素に移動でき、要素を動的に作成するコードを、要素をバインドするイベント ハンドラーのロジックから切り離すことができます。

イベント委任のもう 1 つの利点は、イベント リスナーによって使用される合計メモリ フットプリントが削減されることです (イベント バインディングの数が減少するため)。頻繁にアンロードされる小さなページ (つまり、ユーザーが頻繁に別のページに移動する) の場合、これは大きな影響を及ぼさない可能性があります。しかし、長期間存続するアプリケーションにとっては、それが重要になる可能性があります。要素が DOM から削除されてもまだメモリを占有している (つまり、リークしている) という追跡が非常に困難なケースがいくつかあり、多くの場合、このリークしたメモリはイベント バインディングに関連しています。イベント委任を使用すると、イベント リスナーの「バインド解除」を忘れることを心配することなく、子要素を自由に破棄できます (リスナーは祖先要素上にあるため)。このような種類のメモリ リークは、抑えることができます (完全になくすことはできませんが、それは非常に難しい場合があります。つまり、私はあなたのことを考えています)。

ここでは、より優れたイベント委任の具体的なコード例をいくつか示します:

• JavaScript イベント委任の仕組み
• イベント委任とイベント処理の比較
• jQuery.delegate はイベント デリゲート セレクターの仕様です。
• jQuery.onセレクターを 2 番目のパラメーターとして渡すときにイベント委任を使用する
• JavaScript ライブラリを使用しないイベント委任
• クロージャーとイベント委任: Notイベント委任を使用するようにコードを変換する利点を見てみましょう
• PPKDelegatefocusandblurEvent によって発見された興味深いメソッド (バブルしません)