關於jQuery新的事件綁定機制on()的使用技巧

從jQuery1.7開始，jQuery引入了全新的事件綁定機制，on()和off()兩個函數統一處理事件綁定。由於在此以前有bind(), live(), delegate()等方法來處理事件綁定，jQuery從性能優化以及方式統一方面考慮決定推出新的函數來統一事件綁定方法而且替換掉之前的方法。

on(events,[selector],[data],fn)

$(elements).on( events [, selector] [, data] , handler );

$(elements).off( [ events ] [, selector] [, handler] );

events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。

selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。若是選擇器爲null或省略，當它到達選定的元素，事件老是觸發。

data:當一個事件被觸發時要傳遞event.data給事件處理函數。

fn:該事件被觸發時執行的函數。 false 值也能夠作一個函數的簡寫，返回false。

替換bind()

當第二個參數'selector'爲null時，on()和bind()其實在用法上基本上沒有任何區別了，因此咱們能夠認爲on()只是比bind()多了一個可選的'selector'參數，因此on()能夠很是方便的換掉bind()

$( 'a' ).bind( 'click' , myHandler);

$( 'a' ).on( 'click' , myHandler);

$(window).unbind( 'scroll.myPlugin' );

$(window).off( 'scroll.myPlugin' );

替換live()

在1.4以前相信你們很是喜歡使用live(),由於它能夠把事件綁定到當前以及之後添加的元素上面，固然在1.4以後delegate()也能夠作相似的事情了。live()的原理很簡單，它是經過document進行事件委派的，所以咱們也可使用on()經過將事件綁定到document來達到live()同樣的效果。

live()寫法

代碼以下:

 $('#list li').live('click', '#list li', function() {
    //function code here.
}); 

on()寫法

代碼以下:

$(document).on('click', '#list li', function() {
    //function code here.
});

這裏的關鍵就是第二個參數'selector'在起做用了。它是一個過濾器的做用，只有被選中元素的後代元素纔會觸發事件。

替換delegate()
delegate()是1.4引入的，目的是經過祖先元素來代理委派後代元素的事件綁定問題，某種程度上和live()優勢類似。只不過live()是經過document元素委派，而delegate則能夠是任意的祖先節點。使用on()實現代理的寫法和delegate()基本一致。

delegate()的寫法

代碼以下:

$('#list').delegate('li', 'click', function() {
    //function code here.
});

on()寫法

代碼以下:

$('#list').on('click', 'li', function() {
    //function code here.
});

貌似第一個和第二個參數的順序顛倒了一下，別的基本同樣。

總結
jQuery推出on()的目的有2個，一是爲了統一接口，二是爲了提升性能，因此從如今開始用on()替換bind(), live(), delegate吧。尤爲是不要再用live()了，由於它已經處於不推薦使用列表了，隨時會被幹掉。若是隻綁定一次事件，那接着用one()吧，這個沒有變化。推薦使用on() off().

注：jQuery1.9刪除了一些在1.8中已通過時的api

jQuery1.9刪除了一些在1.8中已通過時的api,想要把那些不夠安全的、缺少效率的、用處不大的，以及帶有誤導的特性通通去掉。若是你想升級你的jquery版本，但又使用了以下被刪除的api的話，能夠引入Migrate遷移插件，被刪除的api能夠在Migrate插件中修復。

.toggle(function, function, … )
toggle()方法可實現點擊一個元素來執行指定函數。此方法被刪除以減小混亂和提升潛在的模塊化程度。

jQuery.browser()
jQuery.browser()經過UA信息來檢測瀏覽器。此方法在1.3版本中已不同意使用，並在1.9版本中被刪除，jquery團隊更建議經過特性檢測來時您的代碼兼容瀏覽器。

.live()
live()方法能夠爲將來生成的元素添加事件，此方法在1.7版本中已不同意使用，並在1.9版本中被刪除，您可使用on()方法來代替。

.die()
die()方法能夠移除live()添加的事件，此方法在1.7版本中已不同意使用，並在1.9版本中被刪除，您可使用off()方法來代替。

.sub()
sub()方法能夠可建立一個新的jQuery副本，不影響原有的jQuery對像，但用例的數量已經不足以證實它存在的價值。

參考：http://www.cnblogs.com/shihao/archive/2012/01/04/2312030.html

　　 http://www.cnblogs.com/davidwang456/archive/2013/05/12/3073803.html