イベントを jQuery にバインドする 4 つの方法

jQuery には、イベントをバインドするためのさまざまな方法が用意されています。各メソッドには独自の特徴があります。それらの類似点と相違点を理解することは、コードを作成する際に適切な選択を行うのに役立ち、エレガントで保守しやすいコードを作成することができます。 jQuery でイベントをバインドする方法を見てみましょう。

jQuery には、bind、live、delegate、on という 4 つのイベント監視メソッドが用意されており、監視のブロックを解除する対応する関数は、unbind、die、undelegate、off です。説明を始める前に

1: binding(type,[data],function(eventObject))

Bind はより頻繁に使用されるもので、その機能は、特定のイベント タイプのリッスン関数を選択したイベント タイプにバインドすることです。要素のパラメータの意味は次のとおりです:

type: クリック、変更、マウスオーバーなどのイベント タイプ。

data: リスニング関数に渡されるパラメータ。event.data を通じて取得されます。オプション;

関数: イベント オブジェクトを渡すことができるリスニング関数。ここでのイベントは、ネイティブ イベント オブジェクトとは異なります。バインドソースコード:

bind: function( types, data, fn ) {
 
  return this.on( types, null, data, fn );
 
  }
 
$('#myol li').bind('click',getHtml);

bind リスナーと対象の要素を1対1でバインドするのが特徴です。ページ上の要素を動的に追加しない場合に使用しても問題ありません。ただし、「リスト要素 5」がリストに動的に追加された場合、それをクリックしても応答がないため、再度バインドする必要があります。この問題を回避するには、live を使用します。

jQuery には、a.click(function(){});、a.change(function(){}); などのイベント バインディングの略語もあります。それらの関数はバインドと同じであり、単に略語。

2 つ: live(type, [data], fn)

live のパラメーターは binding と同じですが、何が問題なのでしょうか? まずソース コードを見てみましょう:

live: function( types, data, fn ) {
 
jQuery( this.context ).on( types, this.selector, data, fn );
 
return this;
 
}

live がそれであることがわかります。メソッドはリスナーを追加しません。リスナーはそれ自体 (this) にバインドされますが、this.context にバインドされます。このコンテキストは何ですか? 実際、それは要素の限られた範囲です。次のコードを読めば明らかです:

$('#myol li').context; //document
 
$('#myol li','#myol').context; //document
 
$('#myol li',$('#myol')[0]); //ol

通常、3 番目のメソッドのようなセレクターは使用しません。ドキュメント、つまりライブ メソッドはリスナーをドキュメントにバインドします。リスナーを要素に直接バインドせずに、イベント委任メカニズムを覚えていますか? 覚えていない場合は、ここをクリックして思い出すことができます。 Live は、イベント委任メカニズムを使用してイベントの監視と処理を完了し、ノードの処理をドキュメントに委任します。リスニング関数では、event.currentTarget を使用して、現在イベントをキャプチャしているノードを取得できます。次の例で明らかになります:

$('#myol li').live('click',getHtml);

3: Live にはこのような欠点があるため、老人には非常に大きな負担があるため、リスナーをドキュメントにバインドするのではなく、最も近い親要素にバインドできないかと考えました。そうでなくても大丈夫です。通常のロジックに従って、デリゲートが誕生しました。

パラメーターには追加のセレクターがあり、イベントをトリガーするターゲット要素を指定するために使用されます。リスナーは、このメソッドを呼び出す要素にバインドされます。ソース コードを見てみましょう:

delegate: function( selector, types, data, fn ) {
 
return this.on( types, selector, data, fn );
 
}

が再び on を呼び出し、セレクターを on に渡しました。このオンが本当に重要なようです。今は無視してください。まずは例を見てみましょう:

$('#myol').delegate('li','click',getHtml);

たくさん読んだ後は、これの本当の姿を見るのが待ちきれません:

on(type,[selector],[data],fn)

パラメーターはデリゲートと似ていますが、まだ微妙な違いがあります。まずはタイプとセレクター 位置が変わり、セレクターはオプションになりました。位置を切り替える理由を検証することは困難ですが、視覚的に快適にするためであるはずです。

セレクターを渡さない例を見てみましょう:

$('#myol li').on('click',getHtml);

event.currentTarget が li 自体であり、bind と同じ効果があることがわかります。セレクターを渡すことに関しては、パラメーターの順序が異なることを除いて、デリゲートと同じ意味を持ち、その他はまったく同じです。

最後に、on の実際の役割がわかります。では、非常に多くのイベント バインディング メソッドがある中で、どのように選択すればよいのでしょうか?実際、これらの違いはすでにわかっているので、この問題について心配する必要はありません。 、実際の状況に応じて使用するだけですよね？ただし、他のメソッドは内部で on を呼び出すことで完了するため、on を直接使用することで効率が向上し、他の 3 つの記述メソッドを on で置き換えることができるため、公式は可能な限り on を使用することを推奨しています。置き換える方法については、違いをしっかり理解した上で、それほど簡単に書き出す必要はないと思います。