Jquery バインディング イベント (バインドとライブの違いの紹介)_jquery

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

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

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

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

では、最初の方法がわかりやすいです。実際、これは通常のものと同じです。JS の使用法は、1 つが欠落していることを除いて似ています。

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

[バインドとライブの違い]

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

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

コードをコピー コードは次のとおりです。

$(" .clickMe" ).live("click",fn);
$("body").append("

ライブ メソッドをテストする手順

");

この新しい要素をクリックすると、次の手順が実行されます:

(1) クリック イベントを生成し、処理のために div に渡します

(2) div に直接バインドされているイベントがないため、イベントは DOM ツリー

に直接バブルします。 (3) イベントは DOM ツリーのルート ノードに到達するまでバブルし続けます。デフォルトでは、ルートノードがバインドされている このクリックイベントを設定します

(4) ライブでバインドされたクリックイベントを実行します

(5) バインドされたイベントのオブジェクトが存在するかどうかを検出し、必要があるかどうかを判断しますバインドされたイベントの実行を続行します。イベント オブジェクトの検出は、

$(event.target).closest('.clickMe') が一致する要素を見つけることができるかどうかを検出することで実現されます。

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

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

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

(1) バインド メソッドは任意の JavaScript イベントをバインドできますが、ライブ メソッドは jQuery1.3 の click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout のみをサポートします。 jQuery 1.4.1 では、focus および青色の

イベントもサポートされています (バブル可能な、より適切な focusin および focusout にマップされます)。さらに、jQuery 1.4.1 では、ホバー (「mouseenter Mouseleave」にマッピング) もサポートされます。

(2) live() は、DOM トラバーサルで見つかった要素を完全にはサポートしません。代わりに、常にセレクターの直後に .live() メソッドを使用する必要があります。

(3) 要素がライブ メソッドを使用してイベントをバインドする場合、イベントの配信やバブリングを防止したい場合は、関数内で false を返す必要があります。stopPropagation() を呼び出すだけでは防止できません。イベント配信またはバブリング