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

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

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

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

$(selector).bind(eventType, handler);

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

$('#btn').bind('click', function() {
  alert('按钮被点击了！');
});

2. 複数のコントロール イベントをバインド

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

$(selector1, selector2, ..., selectorN).bind(eventType, handler);

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

$('#btn1, #btn2, #btn3').bind('click', function() {
  alert('按钮被点击了！');
});

3. on メソッドを使用してイベントをバインドします。

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

$(selector1, selector2, ..., selectorN).on(eventType, handler);

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

$('.btn').on('click', function() {
  alert('按钮被点击了！');
});

4. イベントのバインドを解除

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

$(selector).unbind(eventType, handler);
$(selector).off(eventType, handler);

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

$('#btn').unbind('click');
$('#btn').off('click');

5. Notes

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

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

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

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