jQuery.on()関数の使用例を詳しく解説-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-06-25 10:36:30

オリジナル

1104 人が閲覧しました

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

次の初期 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 コード:

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

ログイン後にコピー

さらに、複数のイベントを同時にバインドし、イベントに対して jQuery によって渡されるパラメーターイベント (イベントイベントオブジェクト) を通じて追加データを処理することもできます。処理関数:

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

ログイン後にコピー

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

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

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