快捷導(dǎo)航

關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧

更新時(shí)間：2013年04月26日 10:41:43 作者：

本篇文章介紹了，關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧。需要的朋友參考下

今天瀏覽jQuery的deprecated列表，發(fā)現(xiàn)live()和die()在里面了，趕緊看了一下，發(fā)現(xiàn)從jQuery1.7開始，jQuery引入了全新的事件綁定機(jī)制，on()和off()兩個(gè)函數(shù)統(tǒng)一處理事件綁定。因?yàn)樵诖酥坝衎ind(), live(), delegate()等方法來處理事件綁定，jQuery從性能優(yōu)化以及方式統(tǒng)一方面考慮決定推出新的函數(shù)來統(tǒng)一事件綁定方法并且替換掉以前的方法。

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

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

selector:一個(gè)選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。如果選擇器為null或省略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。

data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。

fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡(jiǎn)寫，返回false。

替換bind()

當(dāng)?shù)诙€(gè)參數(shù)'selector'為null時(shí)，on()和bind()其實(shí)在用法上基本上沒有任何區(qū)別了，所以我們可以認(rèn)為on()只是比bind()多了一個(gè)可選的'selector'參數(shù)，所以on()可以非常方便的換掉bind()

替換live()

在1.4之前相信大家非常喜歡使用live(),因?yàn)樗梢园咽录壎ǖ疆?dāng)前以及以后添加的元素上面，當(dāng)然在1.4之后delegate()也可以做類似的事情了。live()的原理很簡(jiǎn)單，它是通過document進(jìn)行事件委派的，因此我們也可以使用on()通過將事件綁定到document來達(dá)到live()一樣的效果。

live()寫法

復(fù)制代碼代碼如下:

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

on()寫法

復(fù)制代碼代碼如下:

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

這里的關(guān)鍵就是第二個(gè)參數(shù)'selector'在起作用了。它是一個(gè)過濾器的作用，只有被選中元素的后代元素才會(huì)觸發(fā)事件。

替換delegate()
delegate()是1.4引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和live()優(yōu)點(diǎn)相似。只不過live()是通過document元素委派，而delegate則可以是任意的祖先節(jié)點(diǎn)。使用on()實(shí)現(xiàn)代理的寫法和delegate()基本一致。

delegate()的寫法

復(fù)制代碼代碼如下:

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

on()寫法

復(fù)制代碼代碼如下:

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

貌似第一個(gè)和第二個(gè)參數(shù)的順序顛倒了一下，別的基本一樣。

總結(jié)
jQuery推出on()的目的有2個(gè)，一是為了統(tǒng)一接口，二是為了提高性能，所以從現(xiàn)在開始用on()替換bind(), live(), delegate吧。尤其是不要再用live()了，因?yàn)樗呀?jīng)處于不推薦使用列表了，隨時(shí)會(huì)被干掉。如果只綁定一次事件，那接著用one()吧，這個(gè)沒有變化。

您可能感興趣的文章: