jQuery新的事件綁定機制on()範例應用_jquery

今天瀏覽jQuery的deprecated列表，發現live()和die()在裡面了，趕緊看了一下，發現從jQuery1.7開始，jQuery引入了全新的事件綁定機制，on()和off( )兩個函數統一處理事件綁定。因為在此之前有bind(), live(), delegate()等方法來處理事件綁定，jQuery從性能優化以及方式統一方面考慮決定推出新的函數來統一事件綁定方法並且替換掉以前的方法。

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

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

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

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

fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫，回傳false。

替換bind()

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

替換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()吧，這個沒有變化。