【轉】jQuery on()選擇器函數

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

此外，你還能夠額外傳遞給事件處理函數一些所需的數據。

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

即便是執行on()函數以後新添加的元素，只要它符合條件，綁定的事件處理函數也對其有效。

此外，該函數能夠爲同一元素、同一事件類型綁定多個事件處理函數。觸發事件時，jQuery會按照綁定的前後順序依次執行綁定的事件處理函數。

要刪除經過on()綁定的事件，請使用off()函數。若是要附加一個事件，只執行一次，而後刪除本身，請使用one()函數。

該函數屬於jQuery對象(實例)。

語法

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

用法一：

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

用法二：

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

 

示例&說明

 

以點擊事件("click")爲例，如下是jQuery中事件函數的常規用法(某些函數也存在其它形式的用法，此處暫不列出)：

 1 // 這裏的選擇器selector用於指定能夠觸發事件的元素
 2 // 這裏的選擇器ancestor應是selector的祖輩元素，selector觸發的事件能夠被其祖輩元素在事件流中捕獲，從而以"代理"的形式觸發事件。
 3 
 4 // jQuery 1.0+ (1.4.3+支持參數data)
 5 $("selector").click( [ data ,] handler );
 6 
 7 // jQuery 1.0+ (1.4.3+支持參數data)
 8 $("selector").bind( "click" [, data ], handler );
 9 
10 // jQuery 1.3+ (1.4+支持參數data)
11 $("selector").live( "click" [, data ], handler );
12 
13 // jQuery 1.4.2+
14 $("ancestor").delegate( "selector", "click" [, data ], handler );
15 
16 // jQuery 1.7+
17 $("ancestor").on( "click", "selector" [, data ], handler );

請參考下面這段初始HTML代碼：

1 <div id="n1">
2     <p id="n2"><span>CodePlayer</span></p>
3     <p id="n3"><span>專一於編程開發技術分享</span></p>
4     <em id="n4">http://www.365mini.com</em>
5 </div>
6 <p id="n5">Google</p>

咱們爲<div>中的全部<p>元素綁定點擊事件：

1 // 爲div中的全部p元素綁定click事件處理程序
2 // 只有n二、n3能夠觸發該事件
3 $("div").on("click", "p", function(){
4     // 這裏的this指向觸發點擊事件的p元素(Element)
5     alert( $(this).text() );
6 });

若是要綁定全部的<p>元素，你能夠編寫以下jQuery代碼：

1 //爲全部p元素綁定click事件處理程序(注意：這裏省略了selector參數)
2 //n二、n三、n5都可觸發該事件
3 $("p").on("click", function(event){
4 // 這裏的this指向觸發點擊事件的p元素(Element)
5     alert( $(this).text() );
6 });

此外，咱們還能夠同時綁定多個事件，併爲事件處理函數傳遞一些附加的數據，咱們能夠經過jQuery爲事件處理函數傳入的參數event(Event事件對象)來進行處理：

 1 var data = { id: 5, name: "張三" };
 2 
 3 // 爲n5綁定mouseenter mouseleave兩個事件，併爲其傳入附加數據data
 4 // 附加數據能夠是任意類型
 5 $("body").on("mouseenter mouseleave", "#n5", data, function(event){
 6     var $me = $(this);
 7     var options = event.data; // 這就是傳入的附加數據
 8     if( event.type == "mouseenter"){
 9         $me.html( "你好，" + options.name + "!");      
10     }else if(event.type == "mouseleave" ){
11         $me.html( "再見!");       
12     }           
13 });

此外，即便符合條件的元素是on()函數執行後新添加，綁定事件對其依然有效。一樣以初始HTML代碼爲例，咱們能夠編寫以下jQuery代碼：

1 // 爲div中的全部p元素綁定click事件處理程序
2 // 只有n二、n3能夠觸發該事件
3 $("div").on("click", "p", function(event){
4     alert( $(this).text() );
5 });
6 
7 // 後添加的n6也能夠觸發上述click事件，由於它也是div中的p元素
8 $("#n1").append('<p id="n6">上述綁定的click事件對此元素也生效!</p>');

參數events還支持爲事件類型附加額外的命名空間。當爲同一元素綁定多個相同類型的事件處理函數時。使用命名空間，能夠在觸發事件、移除事件時限定觸發或移除的範圍。

 1 function clickHandler(event){
 2     alert( "觸發時的命名空間:[" + event.namespace + "]");
 3 }
 4 
 5 var $p = $("p");
 6 
 7 // A：爲全部p元素綁定click事件，定義在foo和bar兩個命名空間下
 8 $p.on( "click.foo.bar", clickHandler );
 9 
10 // B：爲全部p元素綁定click事件，定義在test命名空間下
11 $p.on( "click.test", clickHandler );
12 
13 var $n2 = $("#n2");
14 
15 // 觸發全部click事件
16 $n2.trigger("click"); // 觸發A和B (event.namespace = "")
17 
18 // 觸發定義在foo命名空間下的click事件
19 $n2.trigger("click.foo"); // 觸發A (event.namespace = "foo")
20 // 觸發定義在bar命名空間下的click事件
21 $n2.trigger("click.bar"); // 觸發A (event.namespace = "bar")
22 // 觸發同時定義在foo和bar兩個命名空間下的click事件
23 $n2.trigger("click.foo.bar"); // 觸發A (event.namespace = "bar.foo")
24 
25 // 觸發定義在test命名空間下的click事件
26 $n2.trigger("click.test"); // 觸發B (event.namespace = "test")
27 
28 // 移除全部p元素定義在foo命名空間下的click事件處理函數
29 $p.off( "click.foo" ); // 移除A
30 
31 on()函數的參數eventsMap是一個對象，能夠"屬性-值"的方式指定多個"事件類型-處理函數"。對應的示例代碼以下：
32 
33 var data = { id: 5, name: "張三" };
34 
35 var events = {
36     "mouseenter": function(event){
37         $(this).html( "你好，" + event.data.name + "!");       
38     },
39     
40     "mouseleave": function(event){
41         $(this).html( "再見!");
42     }       
43 };
44 
45 //爲n5綁定mouseenter mouseleave兩個事件，併爲其傳入附加數據data
46 $("body").on(events, "#n5", data);

/*========================================

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

  ========================================*/