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", 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代码：

Google

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

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);