快捷導(dǎo)航

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

更新時間：2013年02月07日 14:17:38 作者：

前幾天看到事件委托的時候，關(guān)于live()方法講的不是很詳細，就去搜了一下關(guān)于live()和delegate()的，最后看源碼發(fā)現(xiàn)bind()和delegate()都是由on()實現(xiàn)的，感興趣的朋友可以了解下，或許本文對你有所幫助

前幾天在看《jquery基礎(chǔ)教程》，看到事件委托的時候，關(guān)于live()方法講的不是很詳細，就去搜了一下關(guān)于live()和delegate()的。

然后在一處看到live()已經(jīng)被移除了，囧，然后去看了最新的jq源碼，果然被移除了，現(xiàn)在是1.9.1版本，不知道live()是在之前哪個版本被移除的，慚愧啊，之前都沒留意。

看源碼發(fā)現(xiàn)bind()和delegate()都是由on()實現(xiàn)的。on()的描述如下：

復(fù)制代碼代碼如下:

.on( events [, selector ] [, data ], handler(eventObject) )

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

在需要為較多的元素綁定事件的時候，優(yōu)先考慮事件委托，可以帶來性能上的好處。比如：

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

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

結(jié)果：

當(dāng)事件冒泡到document對象時，檢測事件的target，如果與傳入的選擇符（這里是button）匹配，就觸發(fā)事件，否則不觸發(fā)。

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

最后有一點，原先的live()方法，處理函數(shù)是默認綁定在document對象上不能變的，如果DOM嵌套結(jié)構(gòu)很深，事件冒泡通過大量祖先元素會導(dǎo)致較大的性能損失。而使用.on()方法，事件只會綁定到$()函數(shù)的選擇符表達式匹配的元素上（上面我的例子中，為了簡單綁定到了document），因此可以精確地定位到頁面中的一部分，而事件冒泡的開銷也可以減少。delegate()與on()同理，畢竟是用on()實現(xiàn)的：