jQuery.on()関数の使用例を詳しく解説

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

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

jQuery 1.7 以降、on() 関数はイベント ハンドラーをバインドするために必要なすべての関数を提供し、bind()、delegate()、live() などの以前のイベント関数を均一に置き換えるために使用されます。

on() は、ターゲット要素への直接のバインディング イベントをサポートし、ターゲット要素の祖先要素への委任されたバインディングもサポートします。イベントデリゲーションバインディングモードでは、on()関数実行後に新たに追加された要素であっても、条件を満たしていればバインドされたイベントハンドリング関数が有効となります。

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

on() 経由でバインドされたイベントを削除するには、off() 関数を使用します。イベントを添付する場合は、イベントを 1 回だけ実行し、その後イベント自体を削除するには、one() 関数を使用します。

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

構文

この関数はjQuery 1.7で追加されました。主に次の 2 つの使用形式があります。

使用方法 1:

jQueryObject.on( events [, selector ] [, data ], handler )

使用方法 2:

jQueryObject.on( eventsMap [, selector ] [ , data ] )

パラメータ

パラメータの説明

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

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

selector オプション/文字列型 どの子孫要素がバインドされたイベントをトリガーできるかを指定するために使用される jQuery セレクター。このパラメーターが null または省略された場合、現在の要素自体がイベントにバインドされていることを意味します (イベント ストリームが現在の要素に到達できる限り、実際のトリガーは子孫要素である場合もあります)。

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

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

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

パラメーター セレクターに関しては、単純に次のように理解できます: パラメーターが null に等しいか省略された場合、イベントは現在一致する要素にバインドされ、それ以外の場合、イベントは子孫の中のセレクターに一致する要素にバインドされます。現在一致する要素の要素。

パラメーター ハンドラー内の this は、現在一致する要素の子孫要素のうち、イベントをトリガーする DOM 要素を指します。セレクター パラメーターが null であるか省略されている場合、これは現在一致する要素 (つまり、要素) を指します。

on() は、現在のイベントを表す Event オブジェクトというパラメーターもハンドラーに渡します。

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

イベント処理関数ハンドラーが false 値のみを返す場合は、ハンドラーを直接 false に設定できます。

戻り値

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

重要な注意事項:

セレクター パラメーターが渡された場合、on() 関数はイベント ハンドラーを現在の jQuery オブジェクトに一致する要素にバインドするのではなく、セレクター パラメーターに一致する子孫要素内の要素にバインドします。関数。 on() 関数は、イベントをこれらの子孫要素に 1 つずつ直接バインドするのではなく、現在の jQuery オブジェクトの一致する要素に処理を委任します。 DOM レベル 2 のイベント フロー メカニズムにより、子孫要素セレクターがイベントをトリガーすると、イベント フローが現在の一致する要素に渡されると、そのイベントはすべての祖先要素に渡されます。イベントがトリガーされると、その要素がセレクターと一致すると、jQuery はイベントをキャプチャし、バインドされたイベント ハンドラーを実行します。

簡単に言うと、クリック イベント ハンドラー関数をページ上のすべての

タグにバインドしたい場合は、クリック イベント ハンドラー関数を各 P タグに個別に直接バインドできます。例:

// クリック イベント ハンドラー関数ハンドラーをすべての P 要素に個別にバインドします

$("p").on("click", handler);

これらの P タグの共通の祖先をバインドすることもできますイベント委任メカニズムは要素にバインドされており、DOM のイベント バブリング メカニズムを使用して委任処理を統合します。要素のクリック イベントをトリガーすると、JS は要素とその「親」要素、「祖父」要素に通知します。これらの要素にクリック イベント ハンドラーがバインドされている場合は、それらの要素が実行されます。順序。

// クリック イベント処理関数ハンドラーを body 要素にバインドします。クリック イベントがその子孫 P 要素によってトリガーされる場合、ハンドラー

$(document.body).on("click", "p ",ハンドラー);

この例では、イベント委任メカニズムは、クリック イベント ハンドラーを各 P 要素に直接バインドするのではなく、そのパブリック祖先要素 (この例では document.body) の 1 つに委任するというものです。クリック イベント トリガー通知を受信し、クリック イベントが P 要素の 1 つによってトリガーされた場合は、祖先要素のデリゲートによってバインドされたイベント ハンドラーを実行します。

注: 「フォーカス」や「ブラー」などの一部のイベントはバブリングをサポートしていないため、イベント委任メカニズムの使用は無効になります。ただし、通常、バブリングをサポートする対応するイベントもあります。たとえば、「focusin」は「フォーカス」に対応し、「focusout」は「ぼかし」に対応します。さらに、event.stopPropagation() メソッドを使用して、現在トリガーされているイベントのバブリングを停止することもできます。

例と説明

クリック イベント (「クリック」) を例に挙げます。次に、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").on("click", "p", function(){
    // 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

//为所有p元素绑定click事件处理程序(注意：这里省略了selector参数)
//n2、n3、n5均可触发该事件
$("p").on("click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});