jquery綁定事件on()方法

語(yǔ)法:on(events,[selector],[data],fn)

events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間,如"click"或"keydown.myPlugin" 。
selector:一個(gè)選擇器字符串用于過(guò)濾器的觸發(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í)在用法上基本上沒(méi)有任何區(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)單,它是通過(guò)document進(jìn)行事件委派的,因此我們也可以使用on()通過(guò)將事件綁定到document來(lái)達(dá)到 live()一樣的效果。
1、live()寫法

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

2、on()寫法

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

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

替換delegate()

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

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

2、on()寫法

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容