jQuery事件繫結 on 簡要概述及應用

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

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

看原始碼發現bind()和delegate()都是由on()實現的。on()的描述如下：

複製**

**如下:

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

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

在需要為較多的元素繫結事件的時候，優先考慮事件委託，可以帶來效能上的好處。比如：

如上圖，將click事件繫結在document物件上，頁面上任何元素發生的click事件都冒泡到document物件上得到處理。

注意到.on()的描述中第二個可選引數：selector。如下圖，新增了第二個引數，選擇符button：

結果：

當事件冒泡到document物件時，檢測事件的target，如果與傳入的選擇符（這裡是button）匹配，就觸發事件，否則不觸發。

注意.on()也可以接收乙個物件引數，該物件的屬性是事件型別，屬性值為事件處理函式。下面是官方文件的乙個例子：

最後有一點，原先的live()方法，處理函式是預設繫結在document物件上不能變的，如果dom巢狀結構很深，事件冒泡通過大量祖先元素會導致較大的效能損失。而使用.on()方法，事件只會繫結到$()函式的選擇符表示式匹配的元素上（上面我的例子中，為了簡單繫結到了document），因此可以精確地定位到頁面中的一部分，而事件冒泡的開銷也可以減少。delegate()與on()同理，畢竟是用on()實現的：

jQuery事件繫結 on 簡要概述及應用

前幾天看到事件委託的時候，關於live 方法講的不是很詳細，就去搜了一下關於live 和delegate 的，最後看原始碼發現bind 和delegate 都是由on 實現的，感興趣的朋友可以了解下，或許本文對你有所幫助 前幾天在看 jquery基礎教程 看到事件委託的時候，關於live 方法講的不...

jQuery事件繫結 on 簡要概述及應用

前幾天看到事件委託的時候，關於live 方法講的不是很詳細，就去搜了一下關於live 和delegate 的，最後看原始碼發現bind 和delegate 都是由on 實現的，感興趣的朋友可以了解下，或許本文對你有所幫助 前幾天在看 jquery基礎教程 看到事件委託的時候，關於live 方法講的不...

jQuery事件繫結 on 簡要概述及應用

文章 前幾天在看 jquery基礎教程 看到事件委託的時候，關於live 方法講的不是很詳細，就去搜了一下關於live 和delegate 的。然後在一處看到live 已經被移除了，囧，然後去看了最新的jq原始碼，果然被移除了，現在是1.9.1版本，不知道live 是在之前哪個版本被移除的，慚愧啊，...