jQuery.on() 函數詳解 【轉載】

注意事項

1：on()爲指定元素的一個或多個事件綁定事件處理函數。（可傳遞參數）

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

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

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

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

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

---

語法

用法一：

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類型指定的事件處理函數。

參數中的指向當前匹配元素的後代元素中觸發該事件的DOM元素。若是參數等於或被省略，則指向當前匹配元素(也就是該元素)。
handlerthisselectornullthis

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

 

 

 

---

問題：

jquery中用on來綁定事件，常常的寫法有
$(document).on('click','.classname',function(){});
$('.classname').on('click',function(){});

上面兩種都是給類是classname的元素添加了click事件，那這兩個寫法有什麼區別呢？在效率上哪一個更好呢？

一樣的，
$(document).on('click','#idname',function(){});
$('#idname').on('click',function(){}); 

這個是個id爲idname的原始 綁定click事件，這兩種寫法又有什麼不一樣呢？

 

解釋：

$(document).on是把事件委託到document上，$('className').on是把事件綁定到.className元素上。效率方面，直接綁定在元素上會更爲高效，綁定在document上，每次document有點擊動做，瀏覽器都會判斷當前點擊的對象，若是匹配，再決定要不要執行，多了一個判斷的環節。但在目前開發中，JS渲染效率很高，因此此異同基本能夠忽略不計。此外，針對$(document).on的觸發特色，延伸一下，$("className").on爲onclick綁定，只有在頁面onload的時候執行一次，當頁面刷新後，新加載的具備className的元素便沒有事件綁定到上面了，相反$(document).on這種方法會刷新和從新賦予綁定操做，因此必定程度上更爲全面。

 

原文見 http://www.365mini.com/page/jquery-on.htm / http://bbs.csdn.net/topics/390663982/