jQueryObject.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就會捕獲該事件，從而執行綁定的事件處理函數。
通俗易懂地說，如果我們希望給頁面上所有的<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代碼：
<div id="n1">
<p id="n2"><span>CodePlayer</span></p>
<p id="n3"><span>專注於編程開發技術分享</span></p>
<em id="n4">http://www.365mini.com</em>
</div>
<p id="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 + "!"); }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('<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);
jQueryObject的off()函數詳解
off()函數用於移除元素上綁定的一個或多個事件的事件處理函數。
off()函數主要用於解除由on()函數綁定的事件處理函數。
該函數屬於jQuery對象(實例)。
語法
jQuery 1.7 新增該函數。其主要有以下兩種形式的用法：
用法一：
jQueryObject.off( [ events [, selector ] [, handler ] ] )
用法二：
jQueryObject.off( eventsMap [, selector ] )
參數
| 參數 | 描述 |
|---|---|
| events | 可選/String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。 |
| eventsMap |
Object類型一個Object對象，其每個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler)。 |
| selector |
可選/String類型一個jQuery選擇器，用於指定哪些後代元素可以觸發綁定的事件。如果該參數爲null或被省略，則表示當前元素自身綁定事件(實際觸發者也可能是後代元素，只要事件流能到達當前元素即可)。 |
| handler | 可選/Function類型指定的事件處理函數。 |
off()函數將會移除當前匹配元素上爲後代元素selector綁定的events事件的事件處理函數handler。
如果省略參數selector，則移除爲任何元素綁定的事件處理函數。
參數selector必須與通過on()函數添加綁定時傳入的選擇器一致。
如果省略參數handler，則移除指定元素指定事件類型上綁定的所有事件處理函數。
如果省略了所有參數，則表示移除當前元素上爲任何元素綁定的任何事件類型的任何事件處理函數。
返回值
off()函數的返回值爲jQuery類型，返回當前jQuery對象本身。
實際上，off()函數的參數全是篩選條件，只有匹配所有參數條件的事件處理函數纔會被移除。參數越多，限定條件就越多，被移除的範圍就越小。
示例&說明
請參考下面這段初始HTML代碼：
<input id="btn1" type="button" value="點擊1" />
<input id="btn2" type="button" value="點擊2" />
<a id="a1" href="#">CodePlayer</a>
首先，我們爲上述button和<a>元素綁定事件，然後使用off()函數解除事件綁定，相應的代碼如下：
function btnClick1(){ alert( this.value + "-1" ); } function btnClick2(){ alert( this.value + "-2" ); } var $body = $("body"); // 爲所有button元素的click事件綁定事件處理函數btnClick1 $body.on("click", ":button", btnClick1 ); // 爲所有button元素的click事件綁定事件處理函數btnClick2 $body.on("click", ":button", btnClick2 ); //爲所有a元素綁定click、mouseover、mouseleave事件 $body.on("click mouseover mouseleave", "a", function(event){ if( event.type == "click" ){ alert("點擊事件"); }else if( event.type == "mouseover" ){ $(this).css("color", "red"); }else{ $(this).css("color", "blue"); } }); // 移除body元素爲所有button元素的click事件綁定的事件處理函數btnClick2 // 點擊按鈕，btnClick1照樣執行 $body.off("click", ":button", btnClick2); // 移除body元素爲所有button元素的click事件綁定的所有事件處理函數(btnClick1和btnClick2) // 點擊按鈕，不會執行任何事件處理函數 // $body.off("click", ":button"); // 注意： $body.off("click", "#btn1"); 無法移除btn1的點擊事件，off()函數指定的選擇器必須與on()函數傳入的選擇器一致。 // 移除body元素爲所有元素(包括button和<a>元素)的click事件綁定的所有處理函數 // 點擊按鈕或鏈接，都不會觸發執行任何事件處理函數 // $("body").off("click"); // 移除body元素爲所有元素的任何事件綁定的所有處理函數 // 點擊按鈕，或點擊鏈接或者鼠標移入/移出鏈接，都不會觸發執行任何事件處理函數 // $("body").off( );
運行代碼(其他代碼請自行復制到演示頁面運行)
此外off()函數還可以只移除指定命名空間的事件綁定。
var $btn1 = $("#btn1"); $btn1.on("click.foo.bar", function(event){ alert("click-1"); }); $btn1.on("click.test", function(event){ alert("click-2"); }); $btn1.on("click.test.foo", function(event){ alert("click-3"); }); $btn1.off("click.test"); // 移除click-2、click-3 // $btn1.off("click.foo"); // 移除click-1、click-3 // $btn1.off("click.foo.bar"); // 移除click-1 // $btn1.off("click"); // 移除所有click事件處理函數(click-1、click-2、click-3) // $btn1.off(".foo"); // 移除所有包含命名空間foo的事件處理函數，不僅僅是click事件
轉載自：http://www.365mini.com/page/jquery-on.htm