jQuery中bind()、live()、delegate()圣蝎、on()的區(qū)別

jQuery是一個快速刃宵、簡潔的JavaScript框架,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫(或JavaScript框架)徘公。因為任務(wù)中或者以后的項目中經(jīng)常會有利用jquery操作dom元素的增刪操作组去,所以會涉及到dom元素的綁定事件方式,簡單的歸納一下bind()步淹、live()从隆、delegate()、on()的區(qū)別缭裆,以便以后查閱键闺,也希望能幫到大家。

a.四種函數(shù)介紹

.bind()

bind()函數(shù)用于為每個匹配元素的一個或多個事件綁定事件處理函數(shù)澈驼。執(zhí)行bind()時辛燥,事件處理函數(shù)會綁定到每個匹配元素上。因此你使用bind()所有button元素綁定了click事件缝其,是為當時文檔中存在的每個button元素綁定click事件挎塌。如果之后你向文檔中添加了新的button元素,綁定事件不會對其生效内边。如果你希望綁定事件對未來新添加的元素也生效榴都,請使用on()、delegate()漠其、live()等事件函數(shù)(盡量優(yōu)先使用靠前的事件函數(shù))嘴高。

.live()

live()函數(shù)用于為指定元素的一個或多個事件綁定事件處理函數(shù)。此外和屎,你還可以額外傳遞給事件處理函數(shù)一些所需的數(shù)據(jù)拴驮。即使是執(zhí)行l(wèi)ive()函數(shù)之后新添加的元素,只要它匹配當前jQuery對象的選擇器柴信,綁定的事件處理函數(shù)仍然對其有效套啤。此外,可以為同一元素随常、同一事件類型綁定多個事件處理函數(shù)潜沦。觸發(fā)事件時,jQuery會按照綁定的先后順序依次執(zhí)行綁定的事件處理函數(shù)线罕。

.

.delegate()

delegate()函數(shù)用于為指定元素的一個或多個事件綁定事件處理函數(shù)止潮。此外,你還可以額外傳遞給事件處理函數(shù)一些所需的數(shù)據(jù)钞楼。即使是執(zhí)行delegate()函數(shù)之后新添加的元素,只要它符合條件袄琳,綁定的事件處理函數(shù)仍然對其有效询件。此外燃乍,該函數(shù)可以為同一元素、同一事件類型綁定多個事件處理函數(shù)宛琅。觸發(fā)事件時刻蟹,jQuery會按照綁定的先后順序依次執(zhí)行綁定的事件處理函數(shù)。

.on()

on()函數(shù)用于為指定元素的一個或多個事件綁定事件處理函數(shù)嘿辟。此外舆瘪,你還可以額外傳遞給事件處理函數(shù)一些所需的數(shù)據(jù)。從jQuery 1.7開始红伦,on()函數(shù)提供了綁定事件處理程序所需的所有功能英古,用于統(tǒng)一取代以前的bind()、delegate()昙读、live()等事件函數(shù)召调。on()支持直接在目標元素上綁定事件,也支持在目標元素的祖輩元素上委托綁定蛮浑。在事件委托綁定模式下唠叛,即使是執(zhí)行on()函數(shù)之后新添加的元素,只要它符合條件沮稚,綁定的事件處理函數(shù)也對其有效艺沼。此外,該函數(shù)可以為同一元素蕴掏、同一事件類型綁定多個事件處理函數(shù)澳厢。觸發(fā)事件時,jQuery會按照綁定的先后順序依次執(zhí)行綁定的事件處理函數(shù)囚似。

b.歸納區(qū)別

1)用法不同

$(selector).bind(event,data,function)

$(selector).live(event,data,function)//jquery1.9版本以下支持剩拢,jquery1.9及其以上版本刪除了此方法,jquery1.9以上版本用on()方法來代替

$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本饶唤;

$(selector).on(event,childselector,data,function)//jquery1.7及其以上版本徐伐;jquery1.7版本出現(xiàn)之后用于替代bind(),live()綁定事件方式募狂。

2)綁定方式不同

.bind()是直接綁定在元素上办素。

.live()則是通過冒泡的方式來綁定到元素上的。更適合列表類型的祸穷,綁定到document DOM節(jié)點上性穿。和.bind()的優(yōu)勢是支持動態(tài)數(shù)據(jù)。

live()函數(shù)用于為指定元素的一個或多個事件綁定事件處理函數(shù)雷滚。

.delegate()則是更精確的小范圍使用事件代理需曾,性能優(yōu)于.live()。

.on()則是最新的1.7版本整合了之前的三種方式的新事件綁定機制。

3)對元素的支持度不同

bind()函數(shù)只能針對已經(jīng)存在的元素進行事件的設(shè)置呆万;但是live(),on(),delegate()均支持未來新添加元素的事件設(shè)置商源。

4)刪除方法不同

要刪除通過bind()綁定的事件,請使用unbind()函數(shù)谋减。

要刪除通過live()綁定的事件牡彻,請使用die()函數(shù)。

要刪除通過delegate()綁定的事件出爹,請使用undelegate()函數(shù)庄吼。

要刪除通過on()綁定的事件,請使用off()函數(shù)严就。如果要附加一個事件总寻,只執(zhí)行一次,然后刪除自己盈蛮,請使用one()函數(shù)废菱。

這四種函數(shù)如何去選擇使用

使用.bind()方法是很浪費資源的,因為它要匹配選擇器中的每一項并且挨個設(shè)置相同的事件

處理程序抖誉。

.delegate()方法“很劃算”用來處理性能和響應(yīng)動態(tài)添加元素的時候殊轴。

新的.on()方法主要是可以實現(xiàn).bind() .live()甚至.delegate()的功能,

建議使用.on()方法袒炉,如果你的項目使用了1.7+的jQuery的話旁理,因為它是整合前三種方法的新事件綁定機制。

什么是事件冒泡我磁?

事件冒泡:事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發(fā)孽文,即子級元素先觸發(fā),父級元素后觸發(fā)夺艰。假設(shè)一個元素div芋哭,它有一個下級元素p。

元素

這兩個元素都綁定了click事件郁副,如果用戶點擊了p减牺,它在div和p上都觸發(fā)了click事件。p先觸發(fā)存谎,div后觸發(fā)拔疚。這就叫做事件冒泡。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末既荚,一起剝皮案震驚了整個濱河市稚失,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌恰聘,老刑警劉巖句各,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吸占,死亡現(xiàn)場離奇詭異,居然都是意外死亡诫钓,警方通過查閱死者的電腦和手機旬昭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門篙螟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來菌湃,“玉大人,你說我怎么就攤上這事遍略【逅” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵绪杏,是天一觀的道長下愈。 經(jīng)常有香客問我,道長蕾久,這世上最難降的妖魔是什么势似? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮僧著,結(jié)果婚禮上履因,老公的妹妹穿的比我還像新娘。我一直安慰自己盹愚,他們只是感情好栅迄,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著皆怕,像睡著了一般毅舆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上愈腾,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天憋活,我揣著相機與錄音,去河邊找鬼虱黄。 笑死悦即,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的礁鲁。 我是一名探鬼主播盐欺,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼仅醇!你這毒婦竟也來了冗美?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤析二,失蹤者是張志新(化名)和其女友劉穎粉洼,沒想到半個月后节预,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡属韧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年安拟,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宵喂。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡糠赦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出锅棕,到底是詐尸還是另有隱情拙泽,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布裸燎,位于F島的核電站顾瞻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏德绿。R本人自食惡果不足惜荷荤,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望移稳。 院中可真熱鬧蕴纳,春花似錦、人聲如沸秒裕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽几蜻。三九已至喇潘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間梭稚,已是汗流浹背颖低。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留弧烤,地道東北人忱屑。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像暇昂,于是被迫代替她去往敵國和親莺戒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容