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ā)拔疚。這就叫做事件冒泡。