jquery綁定事件有4種方式,分別為:bind()、live()、delegate()和on()方法;其中bind()方法只能針對已經存在的元素進行事件的綁定,而live()、on()、delegate()都支援未來新加入元素的事件綁定。
本教學操作環境:windows7系統、jquery3.6.1版本、Dell G3電腦。
jQuery中提供了四種事件監聽方式,分別是bind、live、delegate、on,對應的解除監聽的函數分別是unbind、die、undelegate、off。
這幾種方式之間的差異:
1、bind()函數只能針對已經存在的元素進行事件的設定;但是live(), on(),delegate()皆支援未來新加入元素的事件設定;
2、bind()函數在jquery1.7版本以前比較受推崇,1.7版本出來之後,官方已經不推薦用bind (),替代函數為on(),這也是1.7版本新加入的函數,同樣,可以用來代替live()函數,live()函數在1.9版本已經刪除;【相關推薦:《jQuery視頻教程》】
3、live()函數和delegate()函數兩者類似,但是live()函數在執行速度,靈活性和CSS選擇器支援方面較delegate()差些
4、bind()支援Jquery所有版本;live()支援jquery1.9-;delegate()支援jquery1.4.2 ;on()支援jquery1.7;
#以下將詳細介紹這幾種方式:
一、bind(type,[data],function(eventObject))
## bind是使用頻率較高的一種,作用是在選擇到的元素上綁定特定事件類型的監聽函數,參數的意義如下: type:事件類型,如click、change、mouseover等; data:傳入監聽函數的參數,透過event.data取到。可選; function:監聽函數,可傳入event對象,這裡的event是jQuery封裝的event對象,與原生的event對像有區別,使用時需要注意 bind的原始碼:bind: function( types, data, fn ) { return this.on( types, null, data, fn ); } $('#myol li').bind('click',getHtml);
二、live(type, [data], fn)
#live的參數和bind一樣,它又有什麼蹊蹺呢,我們還是先瞥一眼源碼:live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }
$('#myol li').context; //document $('#myol li','#myol').context; //document $('#myol li',$('#myol')[0]); //ol
$('#myol li').live('click',getHtml);
三、delegate和on
live存在那樣的缺點,所以我們就思考,既然老爺子負擔那麼重,可不可以別把監聽器綁定在document上呢,綁定在就近的父級元素上不就好了。順應正常邏輯,delegate誕生了。 參數多了一個selector,用來指定觸發事件的目標元素,監聽器將被綁定在呼叫此方法的元素上。看看原始碼:delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }
$('#myol').delegate('li','click',getHtml);
on(type,[selector],[data],fn)
$('#myol li').on('click',getHtml);
其實這個問題是完全不必糾結的,因為你已經知道他們之間的區別了不是麼?根據實際情況斟酌使用就行。不過官方有推薦就是盡量使用on,因為其他 方法都是內部調用on來完成的,直接使用on可以提高效率,而且你完全可以用on來代替其他三種寫法。至於如何代替我想就不必這麼直白的寫出來了,真正理 解它們的區別之後自然而然也就不是難事了。
更多程式相關知識,請造訪:程式設計影片! !
以上是jquery綁定事件有幾種方式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!