jQuery事件綁定.on()簡要概述及應用

一個簡單的事件綁定如 $('button').on('click',function(){}); 與bind()無二樣。

 

在須要爲較多的元素綁定事件的時候，優先考慮事件委託，能夠帶來性能上的好處。好比：

   

如上圖，將click事件綁定在document對象上，頁面上任何元素髮生的click事件都冒泡到document對象上獲得處理。

注意到.on()的描述中第二個可選參數：selector。以下圖，添加了第二個參數，選擇符button：

結果：

當事件冒泡到document對象時，檢測事件的target，若是與傳入的選擇符（這裏是button）匹配，就觸發事件，不然不觸發。

注意.on()也能夠接收一個對象參數，該對象的屬性是事件類型，屬性值爲事件處理函數。下面是官方文檔的一個例子：

最後有一點，原先的live()方法，處理函數是默認綁定在document對象上不能變的，若是DOM嵌套結構很深，事件冒泡經過大量祖先元素會致使較大的性能損失。而使用.on()方法，事件只會綁定到$()函數的選擇符表達式匹配的元素上（上面個人例子中，爲了簡單綁定到了document），所以能夠精確地定位到頁面中的一部分，而事件冒泡的開銷也能夠減小。delegate()與on()同理，畢竟是用on()實現的：