jQuery新的事件綁定機(jī)制on()示例應(yī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è)沒有變化。
- JQuery中DOM事件綁定用法詳解
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jQuery事件綁定與解除綁定實(shí)現(xiàn)方法
- 淺談jQuery事件綁定原理
- jQuery事件綁定和委托實(shí)例
- jquery 新建的元素事件綁定問題解決方案
- 解析jQuery的三種bind/One/Live事件綁定使用方法
- 關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧
- 對(duì)jQuery的事件綁定的一些思考(補(bǔ)充)
- jQuery事件綁定.on()簡要概述及應(yīng)用
- jQuery實(shí)現(xiàn)按鈕只點(diǎn)擊一次后就取消點(diǎn)擊事件綁定的方法
相關(guān)文章
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-11jQuery實(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-02jQuery選中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-09JavaScript揭秘:實(shí)現(xiàn)自動(dòng)化連連看游戲
這篇文章主要介紹了JavaScript揭秘:實(shí)現(xiàn)自動(dòng)化連連看游戲的相關(guān)資料,需要的朋友可以參考下2023-11-11jquery使用ColorBox彈出圖片組瀏覽層實(shí)例演示
本示例使用Jquery的ColorBox插件彈出圖片組瀏覽層,點(diǎn)擊會(huì)彈出頁中窗的效果同時(shí)帶有關(guān)閉及上一個(gè)下一個(gè)的切換,個(gè)人感覺相當(dāng)不錯(cuò)的彈出窗,感興趣的你可不要錯(cuò)過了哈2013-03-03jquery select動(dòng)態(tài)加載選擇(兼容各種瀏覽器)
jquery select動(dòng)態(tài)加載選擇,兼容各種瀏覽器包括ie6,在ie6下會(huì)報(bào)錯(cuò),不過我們已有解決方法,感興趣的朋友可以了解下,或許對(duì)你學(xué)習(xí)jquery有所幫助2013-02-02jQuery訪問json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實(shí)力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01