jQuery事件中on實現繫結多個事件

相信大家都知道在jQuery1.9版本中，已經去掉了live和delegate方法，從而將on方法的地位進一步提升。

jQuery如此推崇on方法，必有其獨到的地方。所以我們就有必要了解這個on，並在程式碼中利用它，從而優化程式碼和提高效能。那麼接下來我們就來看看on的使用方法

一、使用on進行普通事件繫結

1.1 使用on繫結一個事件

語法結構： jq物件.on(“事件型別”,”事件處理函式”)

1.2 使用on繫結多個事件對應同一個事件處理

函式語法結構：jq物件.on(“事件型別1 事件型別2”,”事件處理函式”)

1.3 使用on繫結多個事件對應不同的事件處理函式

語法結構：

jq物件.on({

           事件型別1 : 事件處理函式1,

           事件型別2 : 事件處理函式2,

           事件型別3 : 事件處理函式3

           });

注意： 使用jQuery中on進行普通繫結事件的時候，會出現一些小小問題，就是不能給動態新增的元素繫結事件，

這時候就要用到on的事件委派（事件委託），接下來我們繼續看看on對於事件委託的處理

二、 使用on進行事件委派

2.1 標準瀏覽器中都有事件冒泡(bubble)或捕獲(propagate)機制

如圖：

當目標元素被觸發時，先從它祖先元素一層一層將事件傳達給目標函式，如上圖中P的父元素 div依次傳遞給target，此為事件捕獲；

–當目標函式被觸發後，又將事件一層一層傳遞到根節點，即老祖宗，此為事件冒泡。所有瀏覽器都有事件冒泡機制。所以，我們可以利用這一特性，優化程式碼，減少事件繫結。

on方法也利用了這一特性。當‘selector’被提供時，就是事件委託，事件觸發時，直接繫結在on方法上的元素是不會觸發該事件，而它指定的後代元素‘selector’就會利用冒泡機制，到直接繫結在on方法上的元素，給予處理。

2.2 語法結構：jq物件.on(“事件型別”,“指定的後代元素”,事件處理函式);

總結： 如果是普通繫結事件你就可以使用on的普通事件繫結，如果是對於動態新增的元素的事件繫結就使用on的事件委派。