Jquery のバインド イベントとライブ バインディング イベントの違いの概要

Jquery で イベントをバインドするには 3 つの方法があります: クリック イベントを例に挙げます

(1) target.click(function(){});

(2) target.bind (" click",function(){});

(3) target.live("click",function(){});

実は、最初の方法はわかりやすいです。は通常の JS と同じです。使い方は似ていますが、on が 1 つ少ないだけです

2 番目と 3 番目のメソッドはすべてバインディング イベントですが、大きく異なります。Jquery のフレームワーク を使用する場合に当てはまります。は頻繁に使用されるため、この 2 つの違いには特に注意する必要があります。

【バインドとライブの違い】

ライブメソッドは実際にはバインドメソッドの変形であり、基本的な機能はどちらもイベントを要素にバインドします。バインド メソッド このメソッドはイベントを既存の要素にのみバインドでき、JS やその他のメソッドを使用して新しく生成された要素には無効です。ライブ メソッドは、バインド メソッドのこの欠点を補うだけであり、対応する要素を後で生成された要素にバインドすることもできます。 。 イベント。では、ライブ メソッドのこの機能はどのように実装されているのでしょうか?以下でその実装原理について説明します。

ライブメソッドが対応するイベントを後から生成される要素にもバインドできる理由は、「イベント委任」に帰着します。いわゆる「イベント委任」とは、祖先要素にバインドされたイベントを使用できることを意味します。その子孫要素。ライブ メソッドの処理メカニズムは、イベントを要素に直接バインドするのではなく、DOM ツリーのルート ノードにバインドすることです。例を挙げて説明します:

   $(".clickMe").live("click",fn);
             $("body").append("<p class=&#39;clickMe&#39;>测试live方法的步骤</p>");

この added 要素をクリックすると、次のステップが実行されます:

(1) click イベントを生成し、それを p に渡して実行します。 it 処理

(2) p に直接バインドされているイベントがないため、イベントは DOM ツリーに直接バブルします

(3) イベントはデフォルトで DOM ツリーのルート ノードまでバブルし続けます。このクリックイベント

はルートノードにバインドされています (4) ライブ

によってバインドされているクリックイベントを実行します (5) バインドされたイベントのオブジェクトが存在するかどうかを検出し、続行する必要があるかどうかを判断しますバインディング決定イベントを実行します。イベント オブジェクトの検出は、$(event.target).closest('.clickMe') が一致する要素を見つけることができるかどうかを検出することによって実現されます。

(6) (5)のテストに合格した後、イベントにバインドされたオブジェクトが存在する場合、バインドされたイベントが実行されます。

ライブメソッドはイベント発生時にのみイベントにバインドされたオブジェクトが存在するかどうかを検出するため、後から追加される要素やイベントバインディングをライブメソッドで実装することができます。対照的に、bind はイベントのバインド フェーズ中にイベントがバインドされる要素が存在するかどうかを判断し、親ノードではなく現在の要素にのみバインドします。

上記の分析によると、ライブの利点は非常に大きいのに、なぜバインドメソッドを使用する必要があるのでしょうか? jquery が live メソッドを使用してバインドを置き換えるのではなく、バインド メソッドを保持する理由は、場合によっては live がバインドを完全に置き換えることができないためです。 主な違い

は次のとおりです: (1) binding メソッドは任意の JavaScript イベントをバインドできますが、live メソッドは jQuery 1.3 の click、dblclick、keydown、keypress、

のみをサポートします。

フォーカスと フォーカスインとフォーカスアウト）。さらに、jQuery 1.4.1 では、ホバー (

を "mouseenter Mouseleave" にマッピングする) もサポートされています。 (2) live() は、DOM トラバーサルを通じて見つかった要素を完全にはサポートしません。代わりに、常にセレクターの直後に .live()

メソッドを使用する必要があります。

(3) 要素がライブ メソッドを使用してイベントをバインドする場合、イベントが配信されたりバブリングしたりしないようにするには、関数で false を返す必要があります。

stopPropagation( を使用します) ) イベントの配信やバブリングを防ぐことはできません

以上がJquery のバインド イベントとライブ バインディング イベントの違いの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。