jQuery.bind()関数の使い方の詳しい説明

bind() 関数は、イベント処理 関数を、一致する要素ごとに 1 つ以上のイベントにバインドするために使用されます。

さらに、追加の必要なデータをイベント ハンドラー関数に渡すこともできます。

bind() が実行されると、イベント ハンドラー関数は一致する各要素にバインドされます。したがって、bind() を使用して、クリック イベントをすべてのボタン要素にバインドします。その時点でドキュメント内に存在する各ボタン要素にクリック イベントをバインドします。後で新しいボタン要素をドキュメントに追加した場合、バインドされたイベントはその要素に対して有効になりません。今後新しく追加される要素にもバインディング イベントを有効にしたい場合は、on()、delegate()、live() などのイベント関数を使用してください (最初は以前のイベント関数を使用してみてください)。

さらに、複数のイベント ハンドラーを同じ要素および同じイベント タイプにバインドできます。イベントがトリガーされると、jQuery はバインドされたイベント処理関数をバインドの順序で実行します。

bind() 経由でバインドされたイベントを削除するには、unbind() 関数を使用します。

この関数はjQueryオブジェクト(インスタンス)に属します。

Syntax

bind()関数には主に以下の2つの使い方があります:

使い方1:

jQueryObject.bind( events [, data ], handler )

使い方2: jQuery 1.4.3で新たにこの使い方に対応しました。

jQueryObject.bind( events [, data ] [, isDefaultBubble ] )

使用法 3: jQuery 1.4 はこの使用法を新たにサポートします。

jQueryObject.bind( eventsMap )

パラメータ

パラメータの説明

events 文字列タイプ スペースで区切られた 1 つ以上のイベント タイプと、オプションの 名前空間 (「click」、「focus click」、「keydown.myPlugin」など)。

data オプション/任意のタイプ イベントがトリガーされると、event.data を通じてあらゆるデータをイベント処理関数に渡す必要があります。

ハンドラー関数型で指定されたイベント処理関数。

isDefaultBubble オプション/ブール型は、イベントがトリガーされたときに要素のデフォルトの動作とイベントのバブリングを許可するかどうかを指定します。デフォルトは true です。

eventsMap オブジェクト型は Object オブジェクトで、各属性はイベント型とオプションの名前空間 (パラメーター イベント) に対応し、属性値はバインドされたイベント処理関数 (パラメーター ハンドラー) に対応します。

パラメータイベントのオプションの名前空間(1.4.3以降でのみサポート)については、以下のサンプルコードを参照してください。

パラメータハンドラー内の this は、現在の DOM 要素を指します。また、bind() は、現在のイベントを表す Event オブジェクトというパラメーターをハンドラーに渡します。

パラメータハンドラーの戻り値は、DOMネイティブイベント処理関数の戻り値と同じ効果があります。たとえば、submit (フォーム送信) イベントのイベント ハンドラー関数が false を返すため、フォームが送信されなくなる可能性があります。

パラメータ isDefaultBubble は、要素のデフォルトの動作とイベントのバブリングが許可されるかどうかを示すために使用されます。値が false の場合、要素のデフォルトの動作 (例: クリック イベントをトリガーするリンクのデフォルトのジャンプ動作、送信イベントをトリガーするフォームのデフォルトの送信動作) およびイベントのバブリング配信が防止されます。

戻り値

bind()関数の戻り値はjQuery型で、現在のjQueryオブジェクトそのものを返します。

例と説明

クリック イベント (「クリック」) を例に挙げます。次に、jQuery でのイベント関数の一般的な使用法を示します (一部の関数には、ここにリストされていない他の形式の使用法もあります)。

次の初期 HTML コードを参照してください:

// 这里的选择器selector用于指定可以触发事件的元素
// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"委托代理"的形式触发事件。
// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").click( [ data ,] handler );
// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").bind( "click" [, data ], handler );
// jQuery 1.3+ (1.4+支持参数data)
$("selector").live( "click" [, data ], handler );
// jQuery 1.4.2+
$("ancestor").delegate( "selector", "click" [, data ], handler );
// jQuery 1.7+
$("ancestor").on( "click", "selector" [, data ], handler );

内のすべての

要素にクリック イベントをバインドします:

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>专注于编程开发技术分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

さらに、複数のイベントを同時にバインドしてイベント ハンドラーを提供することもできます。追加のデータを渡すには、イベント処理関数の jQuery によって渡されるパラメーター イベント (イベント イベント オブジェクト) を通じて処理できます。関数が実行されると、bind 特定のイベントはそれに対して有効になりません。最初の HTML コードを例として、次の jQuery コードを作成できます:

//为div中的所有p元素的click事件绑定事件处理函数
//只有n2、n3可以触发该事件
$("div p").bind("click", function(){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

パラメータ イベントは、イベント タイプへの追加の名前空間の追加もサポートしています。同じタイプの複数のイベント ハンドラーを同じ要素にバインドする場合。名前空間を使用すると、イベントまたは

削除イベント

がトリガーされたときに、トリガーまたは削除の範囲を制限できます。

りー

以上がjQuery.bind()関数の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

関数 使用法 説明する 詳しい

ソース：php.cn

前の記事：Jqueryのbind()、live()、delegate()、on()イベントバインディングメソッドに関する簡単な説明 次の記事：jQuery の .bind()、.live()、および .delegate() の違いの分析

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• PHP配列に要素を追加する方法
  2023-03-14 15:58:02
• シンプルな多肢選択評価システムを実装する JS を示す例
  1970-01-01 08:00:00
• 同じ IP の複数の送信を制限する PHP ソリューション
  2023-03-15 07:38:01
• 正規表現を使用して HTML でフォーム検証を実装する
  1970-01-01 08:00:00
• JavaScript 厳密モードでのこの指摘の問題の詳細な説明
  1970-01-01 08:00:00
• Java でツリー メニュー (マルチレベル メニューを含む) を構築するためのコード例
  1970-01-01 08:00:00
• ホバーが離れたときにスムーズな遷移を実装する CSS3 の詳細な例
  1970-01-01 08:00:00
• スワイパーカルーセル画像のソースコード共有分析
  1970-01-01 08:00:00
• VsCode プラグインを要約して整理する
  1970-01-01 08:00:00
• HttpUtils リクエスト ツール クラス コード
  1970-01-01 08:00:00

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1770

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1906

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1625

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1536

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1571

関連トピック

詳細>

• Excel で最もよく使用される 8 つの関数
• 関数関数の使用法
• ナノスリープ機能の使い方
• JAVAで現在時刻を取得する方法
• Douyin のショートビデオは削除後に復元できますか?
• 更新ステートメントの使用法
• JavaでのInstanceofの使用法
• WeChat アドレスを削除する方法