jQuery.on() 函數使用實例詳解

on()函數用於為指定元素的一個或多個事件綁定事件處理函數。

此外，你還可以額外傳遞給事件處理函數一些所需的資料。

從jQuery 1.7開始，on()函數提供了綁定事件處理程序所需的所有功能，用於統一取代先前的bind()、 delegate()、 live()等事件函數。

on()支援直接在目標元素上綁定事件，也支援在目標元素的祖輩元素上委託綁定。在事件委託綁定模式下，即使是執行on()函數之後新新增的元素，只要它符合條件，綁定的事件處理函數也對其有效。

此外，函數可以為相同元素、相同事件類型綁定多個事件處理函數。觸發事件時，jQuery會依照綁定的先後順序依序執行綁定的事件處理函數。

要刪除透過on()綁定的事件，請使用off()函數。如果要附加一個事件，只執行一次，然後刪除自己，請使用one()函數。

此函數屬於jQuery物件(實例)。

語法

jQuery 1.7 新增此函數。其主要有以下兩種形式的用法：

用法一：

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

#用法二：

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

參數

參數 描述

events String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。

eventsMap Object類型一個Object物件，其每個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler) 。

selector 可選/String類型一個jQuery選擇器，用於指定哪些後代元素可以觸發綁定的事件。如果該參數為null或被省略，則表示當前元素自身綁定事件(實際觸發者也可能是後代元素，只要事件流能到達目前元素即可)。

data 可選/任意類型觸發事件時，需要透過event.data傳遞給事件處理函數的任意資料。

handler Function類型指定的事件處理函數。

關於參數events中可選的命名空間，請參考最下面的範例程式碼。

關於參數selector，你可以簡單地理解為：如果該參數等於null或被省略，則為當前匹配元素綁定事件；否則就是為當前匹配元素的後代元素中符合selector選擇器的元素綁定事件。

參數handler中的this指向當前匹配元素的後代元素中觸發該事件的DOM元素。如果參數selector等於null或被省略，則this指向目前符合元素(也就是該元素)。

on()也會為handler傳入一個參數：表示目前事件的Event物件。

參數handler的回傳值與DOM原生事件的處理函數回傳值作用一致。例如"submit"(表單提交)事件的事件處理函數傳回false，可以阻止表單的提交。

如果事件處理函數handler只為傳回false值，可以直接將handler設為false。

傳回值

on()函數的傳回值為jQuery類型，傳回目前jQuery物件本身。

重要說明：

如果傳遞了selector參數，那麼on()函數並不是為當前jQuery物件匹配的元素綁定事件處理函數，而是為它們的後代元素中符合選擇器selector參數的元素綁定事件處理函數。 on()函數並不是直接為這些後代元素挨個綁定事件，而是委託給當前jQuery物件的匹配元素來處理。由於DOM 2級的事件流機制，當後代元素selector觸發事件時，該事件會在事件冒泡中傳遞給其所有的祖輩元素，當事件流傳遞到當前匹配元素時，jQuery會判斷是哪個後代元素觸發了事件，如果該元素符合選擇器selector，jQuery就會捕獲該事件，從而執行綁定的事件處理函數。

簡單易懂地說，如果我們希望給頁面上所有的64e5601d0a941f4972a2954192bdae18標籤綁定click事件處理函數，我們可以在每個P標籤上直接分別綁定click事件處理函數。例如：

// 為所有P元素分別綁定click事件處理函數handler

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

#我們也可以在這些P標籤的任一公共祖輩元素上綁定事件委託機制，利用DOM的事件冒泡機制來統一委託處理。當我們觸發了某個元素的click事件，JS會依序通知該元素及其"父輩"元素、"爺爺輩"元素…直到最頂部的document物件為止，如果這些元素上綁定了click事件處理函數就會依序執行。

// 在body元素上綁定click事件處理函數handler，如果這個click事件是由其後代的P元素觸發的，就執行handler

$(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元素綁定click事件處理程序

// 只有n2、n3可以觸發該事件

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

    // 這裡的this指向觸發點擊事件的p元素(Element)

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

});

運行程式碼(其他程式碼請自行複製到演示頁面運行)

如果要綁定所有的e388a4556c0f65e1904146cc1a846bee元素，你可以寫如下jQuery程式碼：

//為所有p元素綁定click事件處理程序(注意：這裡省略了selector參數)

//n2、n3、n5均可觸發該事件

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

// 這裡的this指向觸發點擊事件的p元素(Element)

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

});

此外，我們還可以同時綁定多個事件，並為事件處理函數傳遞一些附加的數據，我們可以透過jQuery為事件處理函數傳入的參數event(Event事件物件)來處理：

var data = { id: 5, name: "張三" };

##/ / 為n5綁定mouseenter mouseleave兩個事件，並為其傳入附加資料data

#// 附加資料可以是任意型別

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

    var $me = $(this);

    var options = event.data; // 這就是傳入的附加數據

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

        $me.html( "你好，" + options.name + "!");      

    }else if(event.type == "mouseleave" ){

#        $me.html( "再見!");       

 

##此外，即使符合條件的元素是on()函數執行後新添加，綁定事件對其仍然有效。同樣以初始HTML程式碼為例，我們可以編寫如下jQuery程式碼：

// 為div中的所有p元素綁定click事件處理程序

// 只有n2、n3可以觸發該事件

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

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

});

// 後面新增的n6也可以觸發上述click事件，因為它也是div中的p元素

$("#n1").append( '1fa22f317ca0249c30f5a64a393ad7fd上述綁定的click事件對此元素也生效!94b3e26ee717c64999d7867364b1b4a3');

參數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()函數的參數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中文網其他相關文章！