複数の jquery コントロールをイベントにバインドできますか?

PHPz
リリース: 2023-05-28 14:26:38
オリジナル
953 人が閲覧しました

Web 開発では、同じ機能を実現するために同じイベントを複数のコントロールにバインドする必要があることがよくあります。たとえば、複数のボタンをクリックすると同じイベントがトリガーされます。 jQuery はこの機能を非常に便利に実装できるので、jQuery を使って複数のコントロールに同じイベントをバインドする方法を詳しく紹介します。

  1. 単一コントロール イベントのバインド

jQuery でイベントをコントロールにバインドするには、次のコードを使用できます。

$(selector).bind(eventType, handler);
ログイン後にコピー

その中で、 selector の意味 イベントをバインドするコントロール セレクター、eventType はバインドされるイベントの種類、handler はイベント処理関数を表します。たとえば、次のコードは、クリック イベントを ID btn のボタンにバインドします。

$('#btn').bind('click', function() {
  alert('按钮被点击了!');
});
ログイン後にコピー
  1. 複数のコントロール イベントをバインド

実際の開発では、多くの場合、同じイベントを複数のコントロールに送信します。上記のコードを使用して各コントロールにイベントをバインドすると、非常に面倒になります。コードを簡素化するために、jQuery が提供するメソッドを使用して、イベントを複数のコントロールに同時にバインドできます。

$(selector1, selector2, ..., selectorN).bind(eventType, handler);
ログイン後にコピー

このうち、カンマで区切られた複数のセレクターは、イベントがバインドされる複数のコントロールを表しており、eventType と handler の意味は、イベントを 1 つのコントロールにバインドすることと同じです。たとえば、次のコードは、クリック イベントを ID btn1、btn2、btn3 を持つ 3 つのボタンにバインドします。

$('#btn1, #btn2, #btn3').bind('click', function() {
  alert('按钮被点击了!');
});
ログイン後にコピー
  1. on メソッドを使用してイベントをバインドします。

After jQuery 1.7 では、イベントをバインドするために on メソッドを使用することをお勧めします。 on メソッドの使用法は binding メソッドと似ていますが、構文が少し異なります。 on メソッドを使用して、同じイベントを複数のコントロールに同時にバインドすることもできます。

$(selector1, selector2, ..., selectorN).on(eventType, handler);
ログイン後にコピー

たとえば、次のコードは、クラス btn を使用してクリック イベントをすべてのボタンにバインドします。

$('.btn').on('click', function() {
  alert('按钮被点击了!');
});
ログイン後にコピー
  1. イベントのバインドを解除

必要なくなった場合コントロールのイベントのバインドを解除するには、jQuery が提供する unbind メソッドまたは off メソッドを使用できます。

$(selector).unbind(eventType, handler);
$(selector).off(eventType, handler);
ログイン後にコピー

このうち、selector はイベントをアンバインドするコントロールセレクター、eventType はアンバインドするイベントの種類、handler はイベント処理関数を表します。たとえば、次のコードは、ID btn のボタンのクリック イベントをキャンセルします。

$('#btn').unbind('click');
$('#btn').off('click');
ログイン後にコピー
  1. Notes

同じイベントを複数のコントロールにバインドする場合、Pay を行う必要があります。次の問題に注意してください。

  • イベント処理関数がコントロールのプロパティまたは値を使用する必要がある場合は、 this キーワードを使用してコントロールのプロパティまたは値を取得する必要があります。現在のコントロール。
  • 複数のコントロールにバインドされたイベント処理関数が同じ場合、イベント処理関数をパブリック関数として定義し、バインドされたイベントを呼び出すときに関数名を渡すことができます。
  • 異なるイベント処理関数が同時に同じコントロールにバインドされている場合、バインドを解除するときにすべてのイベント処理関数を解放する必要があります。

上記は、jQuery を使用して同じイベントを複数のコントロールにバインドする方法の詳細な紹介です。同じイベントを複数のコントロールにバインドする必要がある状況が発生した場合は、実際のニーズに応じて適切な方法を選択してバインドおよびバインド解除できます。

以上が複数の jquery コントロールをイベントにバインドできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート