如何理解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 )

$(document).on( 'click', '#myBtn', function(){//data引數可以省略
	alert('點選事件')
})

用法二：

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事件處理函式，我們可以在每個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()方法，讓當前觸發的事件停止冒泡。