jQuery でイベントをバインドする 4 つの方法の紹介

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

jQuery は、bind、live、delegate、on という 4 つのイベント監視メソッドを提供します。監視のブロックを解除する対応する関数は、unbind、die、undelegate、off です。説明を始める前に

その 1 つは、bind(type,[data],function(eventObject))

bind の機能で、特定のイベント タイプのリスニング関数を選択した要素にバインドすることです。パラメータの意味は次のとおりです:

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

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

関数: イベント オブジェクトを渡すことができるリスニング関数。ここでのイベントは、ネイティブ イベント オブジェクトとは異なる、jQuery によってカプセル化されたイベント オブジェクトです。

bindの:

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

bindの特徴は、リスナーを対象の要素に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;
}

ライブメソッドを参照してください。リスナーはそれ自体 (this) にバインドされず、this.context にバインドされます。このコンテキストは何ですか? 実際、それは次のコードを読むと明らかです:

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

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

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

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

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

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

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

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

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

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

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

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

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

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