jQuery でイベントをバインドする 4 つの方法の紹介-PHP开发-php.cn

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

高洛峰

リリース： 2016-12-08 13:38:54

オリジナル

1320 人が閲覧しました

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 );
}
$(&#39;#myol li&#39;).bind(&#39;click&#39;,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 を使用して、現在イベントをキャプチャしているノードを取得できます。次の例で明らかになります:

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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