jqueryでイベントをバインドする方法は何通りありますか?

jquery でイベントをバインドするには、bind()、live()、delegate()、および on() メソッドの 4 つの方法があります。bind() メソッドは、既存の要素のイベントのみを処理できます。また、live()、on()、および delegate() はすべて、将来新たに追加される要素のイベント バインディングをサポートします。

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

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

これらのメソッドの違い:

1.bind() 関数は既存の要素のイベントのみを設定できますが、live()、on() とデリゲートの両方を設定できます。 () 将来的に新しく追加される要素のイベント設定をサポートします;

2. jquery バージョン 1.7 より前は、bind() 関数が比較的人気がありました。バージョン 1.7 のリリース後、bind の正式な使用は推奨されなくなりました.() の代わりとなる関数は on() で、これもバージョン 1.7 で新しく追加された関数です。同様に、live() 関数の置き換えに使用できます。live() 関数はバージョン 1.9 で削除されました。[関連する推奨事項: 「jQuery ビデオ チュートリアル >>]

3. live() 関数と delegate() 関数は似ていますが、live() 関数は delegate() よりも劣ります。実行速度、柔軟性、CSS セレクターのサポートの点で、

4.bind() は Jquery のすべてのバージョンをサポートし、live() は jquery1.9- をサポートし、delegate() は jquery1.4.2 をサポートし、on() は jquery1 をサポートします。 .7;

以下では、これらのメソッドの詳細を紹介します:

1.bind(type,[data],function(eventObject))

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

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

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

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

binding ソースコード:

  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 ですが、それは単なる略語です。

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

live のパラメーターはバインドと同じです。何がおかしいのでしょうか?見てみましょう。最初にソース コードを参照してください。 :

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 と on

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 を使用することを推奨しており、on を直接使用した方が効率が良く、他の 3 つの記述メソッドを on で置き換えることもできます。置き換え方については、そんなにわかりやすく書く必要はないと思いますし、違いをしっかり理解すれば、当然難しくはないと思います。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がjqueryでイベントをバインドする方法は何通りありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。