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 はイベントをキャプチャし、バインドされたイベント ハンドラーを実行します。

簡単に言うと、クリック イベント ハンドラー関数をページ上のすべての 64e5601d0a941f4972a2954192bdae18 タグにバインドしたい場合は、クリック イベント ハンドラー関数を各 P タグに個別に直接バインドできます。例:

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

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

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

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

。

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

在这里的示例中，事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，而是委托给其某个公共的祖辈元素(此处示例中为document.body)，"告诉"他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之一触发的，就执行祖辈元素上委托绑定的事件处理函数。

注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。

示例&说明

以点击事件("click")为例，以下是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 );

请参考下面这段初始HTML代码：

b75e11811f26bdfb387c4225796c531f

    82ca34da368b9c14d867ec99902fc3f145a2772a6b6107b401db3c9b82c049c2CodePlayer54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

    932102aa77913d068cd7f94b634e876945a2772a6b6107b401db3c9b82c049c2专注于编程开发技术分享54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

    f0a690c7287d6f95a2636a8929c18f60http://www.365mini.comd1c6776b927dc33c5d9114750b586338

16b28748ea4df4d9c2150843fecfba68

d80946206b1800013bfb5ec515726273Google94b3e26ee717c64999d7867364b1b4a3

dc6dce4a544fdca2df29d5ac0ea9906b 内のすべての e388a4556c0f65e1904146cc1a846bee 要素のクリック イベントをバインドします:

// div 内のすべての p 要素に対してクリックをバインドしますイベント ハンドラー

// このイベントをトリガーできるのは n2 と n3 だけです

$("div").on("click", "p", function(){

// ここでこれはトリガーを指します。イベントのp要素(要素)

alert( $(this).text() );

});

コードを実行します(他のコードをデモページにコピーして実行してください)

すべての e388a4556c0f65e1904146cc1a846bee 要素をバインドするには、次の jQuery コードを記述できます:

//すべての p 要素のクリック イベント ハンドラーをバインドします (注: ここではセレクター パラメーターは省略されています)

//n2、n3、および n5 をトリガーできます。このイベント

$("p").on("click", function(event){

// ここでは、クリック イベント

アラート( $(this) をトリガーした p 要素 (Element) を指します。 text() ) ;

});

さらに、複数のイベントを同時にバインドして、追加のデータをイベント処理関数に渡すこともできます。イベント処理関数の jQuery 処理:

var data = { id: 5, name: "Zhang San" };

// 2 つのイベントを n5 にバインドし、追加のデータ data を渡します

// data は任意の型です

$("body").on("mouseenter Mouseleave", "#n5", data, function(event){

var $me = $(this);

var options = event.data ; // これは渡される追加データです

if(event.type == "mouseenter"){

$me.html( "Hello," + options.name + "!"); }else if(event.type == "mouseleave" ){

$me.html( "Goodbye!");

});

条件を満たす要素は次の新しい要素になりますon() 関数が実行されるように追加されました。バインディング イベントは引き続き有効です。最初の HTML コードを例として、次の jQuery コードを記述できます:

// クリック イベント ハンドラーを div 内のすべての p 要素にバインドします

// このイベントをトリガーできるのは n2 と n3 だけです

$("div ").on("click", "p", function(event){

alert( $(this).text() );

});

// 後から追加した n6 も上記をトリガーできますclick イベント。これは div

$("#n1").append('1fa22f317ca0249c30f5a64a393ad7fd の p 要素でもあるため、上記でバインドされた click イベントもこの要素に影響します。6fb279ad3fd4344cbdd93aac6ad173ac ');

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

削除イベント

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

function clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}
var $p = $("p");
// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$p.on( "click.foo.bar", clickHandler );
// B：为所有p元素绑定click事件，定义在test命名空间下
$p.on( "click.test", clickHandler );
var $n2 = $("#n2");
// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")
// 触发定义在foo命名空间下的click事件
$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")
// 触发定义在test命名空间下的click事件
$n2.trigger("click.test"); // 触发B (event.namespace = "test")
// 移除所有p元素定义在foo命名空间下的click事件处理函数
$p.off( "click.foo" ); // 移除A

on()

function

eventsMapのパラメータはオブジェクトであり、複数の「イベントタイプ処理関数」を「プロパティ値」の形式で指定できます。対応するサンプルコードは次のとおりです:

var data = { id: 5, name: "张三" };
var events = {
    "mouseenter": function(event){
        $(this).html( "你好，" + event.data.name + "!");       
    },
    
    "mouseleave": function(event){
        $(this).html( "再见!");
    }       
};
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data
$("body").on(events, "#n5", data);

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