啃了一段日子的js相關了,，學的過程中發(fā)現(xiàn)在jQuery中綁定事件時，有人用bind(),，有人用on(),，有人用delegate()，還有人用live(),，看代碼的時候覺得都實現(xiàn)功能了也就掀過去了,，只是一直沒完全弄懂之間的區(qū)別，于是今天查了下資料,，自己做個總結,。

之所以有這么多類型的綁定方法，是因為jQuery的版本更新的原因,，如on()方法就是1.7以后出現(xiàn)的,。

jQuery的事件綁定api頁面上，提到live()方法已經(jīng)過時,，不建議使用,。所以這里我們主要就看下以下三個方法：bind(),、delegate()、on()

我們準備一個html頁面,，用于各種類型事件綁定的測試,。

一個簡單的頁面，放置了一個div,，div里面若干個p元素和一個按鈕,，點擊按鈕可以追加p元素。我們下面將對頁面上的p元素綁定click事件,。

bind()

用法

這樣就為所有div里的p元素都綁定了click事件,，響應為彈出其內(nèi)容。綁定很簡單快捷,，但是這里有兩個問題：
第一個問題,，這里用了隱式迭代的方法，如果匹配到的元素特別多的時候,，比如如果我在div里放了50個p元素,，就得執(zhí)行綁定50次。對于大量元素來說,，影響到了性能,。
但是如果是id選擇器，因為id唯一,，用bind()方法就很快捷了,。
第二個問題，對于尚未存在的元素,，無法綁定,。點擊頁面上的按鈕，將動態(tài)添加一個p元素,，點擊這個p元素,，會發(fā)現(xiàn)沒有動作響應。
用delegate方法就可以解決這兩個問題了,。

另外提一下,，bind()方法還有一種簡寫方式,，上面的代碼還可以換成：

delegate()

用法

這種方式采用了事件委托的概念,。不是直接為p元素綁定事件，而是為其父元素（或祖先元素也可）綁定事件,，當在div內(nèi)任意元素上點擊時,，事件會一層層從event target向上冒泡，直至到達你為其綁定事件的元素,，如此例中的div元素,。冒泡的過程中,，如果事件的currentTarget與選擇器匹配時，就會執(zhí)行代碼,。

這樣就解決了用bind()方法的上面兩個問題,，不用再一個個地去為p元素綁定事件，也可以為動態(tài)添加進來的p元素綁定,。甚至,，如果你將事件綁定到document上，都不用等document準備好就可執(zhí)行綁定,。

這樣,，綁定是容易了，但是調(diào)用的時候也可能出現(xiàn)問題,。如果事件目標在DOM樹中很深的位置,，這樣一層層冒泡上來查找與選擇器匹配的元素，又影響到性能了,。

on()

on()其實是將以前的綁定事件方法作了統(tǒng)一,，查看jQuery無壓縮的源碼（我這里看的版本是1.11.3），可以發(fā)現(xiàn)無論bind()還是delegate()其實都是通過on()方法實現(xiàn)的,，只是參數(shù)不同罷了,。

上面的例子中，用on()可以作如下綁定：

官方文檔建議：

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

盡量使用on()來綁定事件,。

移除事件

對應于bind(),、delegate()和on()綁定方法，其移除事件的方法分別為：

除了像上面這樣移除指定的事件綁定之外,，還可以不傳入?yún)?shù),，移除所有事件綁定，這里就不一一列出了,，jQuery的官方文檔寫得非常詳細,。

總結

1.選擇器匹配到的元素比較多時，不要用bind()迭代綁定

2.用id選擇器時,，可以用bind()

3.需要給動態(tài)添加的元素綁定時,，用delegate()或者on()

4.用delegate()和on()方法，dom樹不要太深

5.盡量使用on()

以上所述就是本文的全部內(nèi)容了,，希望大家能夠喜歡,。