everest33

原文地址：http://www.365mini.com/page/jquery-on.htm

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中可選的命名空間，請參考最下面的示例代碼。

關于參數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就會捕獲該事件，從而執行綁定的事件處理函數。

通俗易懂地說，如果我們希望給頁面上所有的<P>標簽綁定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代碼：

<divid="n1">
    <pid="n2"><span>CodePlayer</span></p>
    <pid="n3"><span>專注于編程開發技術分享</span></p>
    <emid="n4">http://www.365mini.com</em>
</div>
<pid="n5">Google</p>

我們為<div>中的所有<p>元素綁定點擊事件：

// 為div中的所有p元素綁定click事件處理程序
// 只有n2、n3可以觸發該事件
$("div").on("click","p",function(){
    // 這里的this指向觸發點擊事件的p元素(Element)
    alert( $(this).text());
});

運行代碼(其他代碼請自行復制到演示頁面運行)

如果要綁定所有的<p>元素，你可以編寫如下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 +"!");      
    }elseif(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('<p id="n6">上述綁定的click事件對此元素也生效!</p>');

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