關(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ù)的簡寫,返回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()的原理很簡單,它是通過document進(jìn)行事件委派的,因此我們也可以使用on()通過將事件綁定到document來達(dá)到live()一樣的效果。
live()寫法
$('#list li').live('click', '#list li', function() {
//function code here.
});
on()寫法
$(document).on('click', '#list li', function() {
//function code here.
});
這里的關(guān)鍵就是第二個(gè)參數(shù)'selector'在起作用了。它是一個(gè)過濾器的作用,只有被選中元素的后代元素才會觸發(fā)事件。
替換delegate()
delegate()是1.4引入的,目的是通過祖先元素來代理委派后代元素的事件綁定問題,某種程度上和live()優(yōu)點(diǎn)相似。只不過live()是通過document元素委派,而delegate則可以是任意的祖先節(jié)點(diǎn)。使用on()實(shí)現(xiàn)代理的寫法和delegate()基本一致。
delegate()的寫法
$('#list').delegate('li', 'click', function() {
//function code here.
});
on()寫法
$('#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í)會被干掉。如果只綁定一次事件,那接著用one()吧,這個(gè)沒有變化。
- jQuery事件綁定和委托實(shí)例
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jQuery事件綁定與解除綁定實(shí)現(xiàn)方法
- 淺談jQuery事件綁定原理
- jQuery的三種bind/One/Live/On事件綁定使用方法
- jQuery事件綁定on()與彈窗實(shí)現(xiàn)代碼
- jquery 事件冒泡的介紹以及如何阻止事件冒泡
- Jquery阻止事件冒泡 event.stopPropagation
- 事件冒泡是什么如何用jquery阻止事件冒泡
- jquery取消事件冒泡的三種方法(推薦)
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
相關(guān)文章
JQuery Easyui Tree的oncheck事件實(shí)現(xiàn)代碼
最近項(xiàng)目中有用到Easyui Tree,我想要checkbox的選中事件,但是api只提供了一個(gè)onClick事件,我百度、google之后,額,還是看js吧2010-05-05
自編jQuery插件實(shí)現(xiàn)模擬alert和confirm
現(xiàn)在絕大多數(shù)網(wǎng)站都不用自帶的alert和confirm了,因?yàn)榻缑嫣擦恕R虼诉@個(gè)插件就這樣產(chǎn)生了...2014-09-09
jquery實(shí)現(xiàn)簡單的輪換出現(xiàn)效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單的輪換出現(xiàn)效果,涉及jquery針對圖片樣式切換效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07

