jQuery綁定事件的四種方式：bind、live、delegate、on

一、jQuery操做DOM元素的綁定事件的四種方式

　　jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off。

二、必備的基礎知識: DOM樹

　　示例，這是在browser環境下的一棵模擬DOM樹：

　　

　　咱們的頁面能夠理解爲一棵DOM樹，當咱們在葉子結點上作什麼事情的時候（如click一個a元素），若是咱們沒有人爲的設置stopPropagation(Moder Browser), 　

　　cancelBubble(IE), //阻止傳播（現代的瀏覽器），取消冒泡（ie瀏覽器），那麼它的全部父元素，祖宗元素都會受之影響，綁定的事件也對它們產生做用。

　　$('a').bind('click', function() { alert("That tickles!") });

　　當咱們點擊a，首先會觸發它自己所綁定的click事件，而後會一路往上，觸發它的父元素，祖先元素上全部綁定的click事件：

三、bind

　　$(selector).bind(event,data,function)

　　event：事件，必選，一個或多個事件；　　data：參數，可選；　　fn：綁定事件發生時執行的函數，必選。

　　bind()是最直接的、存在最久的綁定方法。

　　優勢：這個方法提供了一種在不一樣瀏覽器中對事件處理的兼容性解決方案。

　　缺點：它會綁定事件到全部的目標元素上，有一個綁一個，在頁面上的元素不會動態添加的時候使用它沒什麼問題。

　　　　   但若是列表中動態增長一個「列表元素5」，點擊它是沒有反應的，必須再bind一次才行。也就是說，它不會綁定到在它執行完後動態添加的那些元素上。

　　　　　當元素不少時，會出現效率問題。當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。

四、live

　　$(selector).live(event,data,function)

　　這個方法用到了事件委託的概念來處理事件的綁定。

　　優勢：這裏僅有一次的事件綁定，綁定到document上而不像.bind()那樣給全部的元素挨個綁定。

　　　　   那些動態添加的元素依然能夠觸發那些早先綁定的事件，由於事件真正的綁定是在document上。

　　　　　你能夠在document ready以前就能夠綁定那些須要的事件。

五、delegate

　　$(selector).delegate(childSelector,event,data,function)

　　childSelector：selector的子元素，必需項。

　　delegate()有點像live(),不一樣於.live()的地方在於，它不會把全部的event所有綁定到document,而是由你決定把它放在哪兒。

　　優勢：你能夠選擇你把這個事件放到那個元素上了。

　　　      須要迭代查找全部的selector/event data來決定那個子元素來匹配，可是由於你能夠決定放在那個根元素上，因此能夠有效的減少你所要查找的元素。

　　　　　能夠用在動態添加的元素上。

　　缺點：須要查找綁定的子元素，儘管比document少不少了，不過，你仍是得浪費時間來查找。

六、on

　　其實.bind(), .live(), .delegate()都是經過.on()來實現的，.unbind(), .die(), .undelegate(),也是同樣的都是經過.off()來實現的，

 　  優勢：提供了一種統一綁定事件的方法。

　　缺點：也許會對你產生一些困擾，由於它隱藏了前面咱們所介紹的三種方法的細節。

七、四種方式的異同和優缺點

　　相同點：1.都支持單元素多事件的綁定；空格相隔方式或者大括號替代方式;

　 　　　　　2.均是經過事件冒泡方式，將事件傳遞到document進行事件的響應；

　　比較和聯繫:

　　　　　　1.bind()函數只能針對已經存在的元素進行事件的設置；可是live(),on(),delegate()均支持對將來新添加元素的事件設置；

　　　　　　2.bind()支持Jquery全部版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；

　　　　　　　bind()函數在jquery1.7版本之前比較受推崇，1.7版本出來以後，官方已經不推薦用bind()，替代函數爲on(),這也是1.7版本新添加的函數，

　　　　　　　一樣，能夠用來代替live()函數，live()函數在1.9版本已經刪除；

 　　　　　 3.live()函數和delegate()函數二者相似，可是live()函數在執行速度，靈活性和CSS選擇器支持方面較delegate()差些；

八、結論

　　　　　　用.bind()的代價是很是大的，它會把相同的一個事件處理程序hook到全部匹配的DOM元素上。【bind：直接綁定到元素上，有一個綁一個。】

　　　　　　不要再用.live()了，它已經再也不被推薦了。

　　　　　　.delegate()會提供很好的方法來提升效率，同時咱們能夠添加到動態建立的元素上。

　　　　　  .on()是整合了以前的3種方式的新事件綁定機制，咱們能夠用.on()來代替上述的3種方法。

 九、綁定多事件的處理

　　　　　　單事件處理：例如 $(selector).bind("click",data,function);

　　　　　　多事件處理：

　　　　　　　　　　1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);

　　　　　　　　　   2.利用大括號靈活定義多事件，例如 $(selector).bind({event1:function, event2:function, ...})　　　　　　　　　　

　　　　     空格相隔方式：綁定較爲死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數的狀況；

　　　　　  大括號替代方式：綁定較爲靈活，能夠給事件單獨綁定函數。　

 

參考文獻：

　　http://www.cnblogs.com/xilipu31/p/4105794.html

　　http://blog.csdn.net/panfang/article/details/21705681

　　http://www.cnblogs.com/piercalex/archive/2013/03/30/2990679.html

　　http://www.51edu.com/it/bckf/35687.html