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 でのイベント関数の一般的な使用法を示します (一部の関数には、ここにリストされていない他の形式の使用法もあります)。

// 这里的选择器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>

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