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

この章では、jQuery でイベントをバインドする 4 つの方法を紹介します。必要な方は参考にしてください。

jQuery には、bind、live、delegate、on という 4 つのイベント監視メソッドが用意されており、リッスン解除に対応する関数は、unbind、die、undelegate、off です。この記事で 1 つずつ詳しく紹介しますので、興味のある方は一緒にご覧ください。

jQuery には、イベントをバインドするためのさまざまな方法があり、それぞれの類似点と相違点を理解してください。それらの間にあるものは、コードを書くときに正しい選択をするのに役立ち、エレガントで保守しやすいコードを書くことができます。 jQuery でイベントをバインドする方法を見てみましょう。

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

1 つ:bind(type,[data],function(eventObject))

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

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

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

関数: イベント オブジェクトを渡すことができるリスニング関数。ここでのイベントは、jQuery によってカプセル化されたイベント オブジェクトであり、使用する場合は注意が必要です。

bind ソースコード:

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(){}); などのイベント バインディングの短縮方法もあります。それらの関数は次と同じです。 binding、only ただの略語です。

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

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

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

ライブメソッドがリスナーをそれ自体 (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: ライブにはこのような欠点があるため、老人の負担が非常に大きいため、リスナーを縛り付けることができないか考えました。一方、ドキュメントを最も近い親要素にバインドする方がよいのではないでしょうか。通常のロジックに従って、デリゲートが誕生しました。

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

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 を使用することを推奨しています。置き換える方法については、違いをしっかり理解した上で、それほど簡単に書き出す必要はないと思います。

以上、編集者が紹介したjQueryバインディングイベントの4つの方法が皆様の参考になれば幸いです。