欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery新的事件綁定機(jī)制on()示例應(yīng)用

 更新時(shí)間:2014年07月18日 11:31:04   投稿:whsnow  
從jQuery1.7開始,jQuery引入了全新的事件綁定機(jī)制,on()和off()兩個(gè)函數(shù)統(tǒng)一處理事件綁定,下面通過示例為大家介紹下

今天瀏覽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è)過濾器的作用,只有被選中元素的后代元素才會(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è)沒有變化。

相關(guān)文章

  • 淺談jQuery操作類數(shù)組的工具方法

    淺談jQuery操作類數(shù)組的工具方法

    在很多時(shí)候,JQuery的$()函數(shù)都返回一個(gè)類似數(shù)據(jù)的JQuery對(duì)象,例如$(‘div’)將返回div里面的所有div元素包裝的JQuery對(duì)象。在這種情況下,JQuery提供了幾個(gè)常用的屬性和方法來操作JQuery對(duì)象。本文將對(duì)此進(jìn)行介紹,下面跟著小編一起來看下吧
    2016-12-12
  • jQuery實(shí)現(xiàn)帶有動(dòng)畫效果的回到頂部和底部代碼

    jQuery實(shí)現(xiàn)帶有動(dòng)畫效果的回到頂部和底部代碼

    這篇文章主要介紹了jQuery實(shí)現(xiàn)帶有動(dòng)畫效果的回到頂部和底部代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-11-11
  • jQuery實(shí)現(xiàn)ajax的嵌套請(qǐng)求案例分析

    jQuery實(shí)現(xiàn)ajax的嵌套請(qǐng)求案例分析

    這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的嵌套請(qǐng)求,結(jié)合具體實(shí)例形式分析了ajax嵌套請(qǐng)求的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-02-02
  • jQuery選中select控件 無法設(shè)置selected的解決方法

    jQuery選中select控件 無法設(shè)置selected的解決方法

    select 控件的 option用jQuery動(dòng)態(tài)添加,然后選中某項(xiàng)時(shí),IE6不能執(zhí)行(火狐沒問題),用try{}catch(err){alert(err.description);}提示為“無法設(shè)置selected屬性 未指明的錯(cuò)誤”
    2010-09-09
  • jQuery中ajax的具體使用

    jQuery中ajax的具體使用

    本文將介紹jQuery中如何使用Ajax以及通過代碼詳解其使用方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-10-10
  • JavaScript揭秘:實(shí)現(xiàn)自動(dòng)化連連看游戲

    JavaScript揭秘:實(shí)現(xiàn)自動(dòng)化連連看游戲

    這篇文章主要介紹了JavaScript揭秘:實(shí)現(xiàn)自動(dòng)化連連看游戲的相關(guān)資料,需要的朋友可以參考下
    2023-11-11
  • jquery使用ColorBox彈出圖片組瀏覽層實(shí)例演示

    jquery使用ColorBox彈出圖片組瀏覽層實(shí)例演示

    本示例使用Jquery的ColorBox插件彈出圖片組瀏覽層,點(diǎn)擊會(huì)彈出頁中窗的效果同時(shí)帶有關(guān)閉及上一個(gè)下一個(gè)的切換,個(gè)人感覺相當(dāng)不錯(cuò)的彈出窗,感興趣的你可不要錯(cuò)過了哈
    2013-03-03
  • uploader秒傳圖片到服務(wù)器完整代碼

    uploader秒傳圖片到服務(wù)器完整代碼

    這篇文章主要為大家詳細(xì)介紹了uploader秒傳圖片到服務(wù)器的完整代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • jquery select動(dòng)態(tài)加載選擇(兼容各種瀏覽器)

    jquery select動(dòng)態(tài)加載選擇(兼容各種瀏覽器)

    jquery select動(dòng)態(tài)加載選擇,兼容各種瀏覽器包括ie6,在ie6下會(huì)報(bào)錯(cuò),不過我們已有解決方法,感興趣的朋友可以了解下,或許對(duì)你學(xué)習(xí)jquery有所幫助
    2013-02-02
  • jQuery訪問json文件中數(shù)據(jù)的方法示例

    jQuery訪問json文件中數(shù)據(jù)的方法示例

    這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實(shí)力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01

最新評(píng)論