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)樵诖酥坝?bind(), 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è)過濾器的作用,只有被選中元素的后代元素才會(huì)觸發(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í)會(huì)被干掉。如果只綁定一次事件,那接著用one()吧,這個(gè)沒有變化。
- jquery綁定事件不生效的解決方法
- jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法
- jQuery防止重復(fù)綁定事件的解決方法
- jQuery中on綁定事件后引發(fā)的事件冒泡問題如何解決
- Jquery on方法綁定事件后執(zhí)行多次的解決方法
- 淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)
- 解決jquery appaend元素中id綁定事件失效的問題
- jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
- JQuery中綁定事件(bind())和移除事件(unbind())
- JQuery 綁定事件時(shí)傳遞參數(shù)的實(shí)現(xiàn)方法
- jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
相關(guān)文章
jQuery實(shí)現(xiàn)類似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)類似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果的方法,實(shí)例分析了jquery隨機(jī)數(shù)及Ajax調(diào)用的相關(guān)技巧,需要的朋友可以參考下2015-08-08
利用Jquery實(shí)現(xiàn)幾款漂亮實(shí)用的時(shí)間軸(附示例代碼)
這篇文章主要介紹了利用Jquery實(shí)現(xiàn)幾款漂亮的時(shí)間軸示例代碼,文中利用Jquery實(shí)現(xiàn)了縱向折疊時(shí)間軸、縱向鼠標(biāo)滑動(dòng)時(shí)間軸、縱向可折疊時(shí)間軸以及橫向時(shí)間軸,每種時(shí)間軸都給出了完整的示例代碼,需要的朋友可以參考學(xué)習(xí)。2017-02-02
jquery.serialize() 函數(shù)語法及簡單實(shí)例
下面小編就為大家?guī)硪黄猨query.serialize() 函數(shù)語法及簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例
這篇文章主要為大家詳細(xì)介紹了Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
jquery中val()方法是從最后一個(gè)選項(xiàng)往前讀取的
這篇文章主要介紹了jquery中val()方法是從最后一個(gè)選項(xiàng)往前讀取的,需要的朋友可以參考下2015-09-09

