Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
簡(jiǎn)介
最近了解到很多網(wǎng)頁開發(fā)者對(duì)jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。這些疑惑通常是關(guān)于它們之間真正的區(qū)別是什么啊,什么時(shí)候該使用它們啊。下面本文將給大家詳細(xì)介紹這四個(gè)方法之間的區(qū)別,分別對(duì)每個(gè)方法都進(jìn)行了詳細(xì)的介紹,話不多說,來一起看看詳細(xì)的介紹:
在我們深入了解這些方法之前,我們先來一段常見的的HTML,作為我們編寫jquery示例方法使用的樣本。
<ul id="members" data-role="listview" data-filter="true"> <!-- ... 其他li ... --> <li> <a href="detail.html?id=10" rel="external nofollow" > <h3>John Resig</h3> <p><strong>jQuery Core Lead</strong></p> <p>Boston, United States</p> </a> </li> <!-- ... 其他li ... --> </ul>
使用Bind方法
.bind()
方法將事件類型和一個(gè)事件處理函數(shù)直接注冊(cè)到了被選中的DOM元素中。這個(gè)方法被使用得最久,在此期間,它很好的解決了各種跨瀏覽器的問題。當(dāng)使用它來連接事件處理函數(shù)時(shí),它仍然非常簡(jiǎn)潔,但是也存在著一些性能方面的問題,將在下面羅列出來。
/* .bind() 方法將事件類型和一個(gè)事件處理函數(shù)直接注冊(cè)到了被選中的DOM元素中。 .click() 方法只是.bind() 方法的簡(jiǎn)寫。 */ $( "#members li a" ).bind( "click", function( e ) {} ); $( "#members li a" ).click( function( e ) {} );
.bind()
方法將會(huì)把事件處理函數(shù)連接到所有匹配的a標(biāo)簽。這種方式并不好。這樣做的話,它不僅在所有匹配的元素中隱含地迭代附加事件處理函數(shù),而且這些操作非常浪費(fèi)(多余),因?yàn)檫@些相同的事件處理函數(shù)是被一遍一遍的重復(fù)的添加到所有匹配的標(biāo)簽上。
優(yōu)點(diǎn):
- 適用于各種瀏覽器
- 連接事件處理函數(shù)非常方便快捷
- 可以使用
.click()
,.hover()
等簡(jiǎn)寫方法來更方面地連接事件處理函數(shù) - 對(duì)于一個(gè)簡(jiǎn)單的ID選擇器,使用
.bind()
方法不僅可以很快地連接事件處理函數(shù),而且當(dāng)事件被觸發(fā)時(shí), 事件處理函數(shù)幾乎是馬上就被調(diào)用了
缺點(diǎn):
- 這樣方法會(huì)將所有的事件處理函數(shù)附加到所有匹配的元素
- 不可以動(dòng)態(tài)地匹配相同選擇器的元素
- 當(dāng)操作大量匹配的元素時(shí)會(huì)有性能方面的問題
- 附加操作是在前期完成的,這可能導(dǎo)致頁面加載時(shí)存在性能問題
使用Live方法
.live()
方法使用了事件委托的概念來實(shí)施其所謂的“魔法”。你調(diào)用live()
方法的方式就像是調(diào)用bind()
方法那樣方便。然而在這表面之下, .live()
方法與前者的實(shí)現(xiàn)方式大不相同。 .live()
方法將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息一起附加到文檔的根級(jí)元素(即document)。通過將事件信息注冊(cè)到document上,這個(gè)事件處理函數(shù)將允許所有冒泡到document的事件調(diào)用它(例如委托型、傳播型事件)。一旦有一個(gè)事件冒泡到document元素上,Jquery會(huì)根據(jù)選擇器或者事件的元數(shù)據(jù)來決定哪一個(gè)事件處理函數(shù)應(yīng)該被調(diào)用,如果這個(gè)事件處理函數(shù)存在的話。這個(gè)額外的工作將會(huì)在用戶交互時(shí)對(duì)性能方面造成一定的影響,但是初始化注冊(cè)事件的過程相當(dāng)?shù)乜臁?/p>
/* 方法將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息一起附加到文檔的根級(jí)元素(即document) ( "#members li a" & "click" ) */ $( "#members li a" ).live( "click", function( e ) {} );
.bind()這個(gè)例子與上面bind()方法的例子對(duì)比的話有一個(gè)優(yōu)點(diǎn)在于它僅僅把事件處理函數(shù)附加到document元素一次,而不是很多次。這樣不僅更快,而且還減少了性能的浪費(fèi)。然而,使用這個(gè)方法也會(huì)帶來很多問題,下面將一一列出。
優(yōu)點(diǎn):
- 所有的事件處理函數(shù)都只會(huì)被注冊(cè)一次,而不是像
bind()
那樣進(jìn)行多次注冊(cè) - 將
bind()
方法升級(jí)到live()
方法非常方便,你僅需要將"bind"替代為"live"就可以了 - 那些被動(dòng)態(tài)添加到DOM的元素也將被神奇的匹配到,因?yàn)檎鎸?shí)的事件信息是被注冊(cè)到document元素上的
- 你可以在文檔加載完之前連接事件處理函數(shù),這樣可以幫助你更好地利用你可能沒有用的時(shí)間
缺點(diǎn):
- 這個(gè)方法在Jquery 1.7以后的版本被棄用了,你應(yīng)該在你的代碼里逐步放棄使用它
- 使用這個(gè)方法時(shí)鏈?zhǔn)讲僮鳑]有得到正確的支持,可能會(huì)出現(xiàn)某些錯(cuò)誤
- 所做的匹配操作基本上沒用因?yàn)樗挥糜谠赿ocument元素上注冊(cè)事件處理函數(shù)
- 使用
event.stopPropogation()
方法將會(huì)沒用,因?yàn)槭录偸且呀?jīng)被委托到了document元素上 - 因?yàn)樗械倪x擇器或者事件信息都被附加到document元素上了,所以一旦有一個(gè)事件要調(diào)用某個(gè)事件處理函數(shù),Jquery會(huì)在一大堆儲(chǔ)存的元數(shù)據(jù)中使用matchesSelector方法來決定哪一個(gè)事件處理函數(shù)將會(huì)被調(diào)用,如果這個(gè)函數(shù)有的話。
- 因?yàn)槟闼B接的事件總是被委托到document上,所如果你的DOM的層級(jí)很深的話,這會(huì)導(dǎo)致一定的性能問題
使用Delegate方法
.delegate()
方法與live()
方式實(shí)現(xiàn)方式相類似,它不是將選擇器或者事件信息附加到document,而是讓你指定附加的元素。就像是live()方法一樣,這個(gè)方法使用事件委托來正確地工作。
如果你跳過了前面關(guān)于 .live()
方法的介紹,你可能要回去重新看看它,因?yàn)檫@里涉及到之前我所闡述的一些內(nèi)部邏輯
/* .delegate() 方法會(huì)將選擇器和事件信息 ( "li a" & "click" ) 附加到你指定的元素上 ( "#members" )。 */ $( "#members" ).delegate( "li a", "click", function( e ) {} );
.delegate()
方法十分強(qiáng)大。在上面這個(gè)例子中,與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息將會(huì)被附加到( #members" )這個(gè)元素上。這樣做比使用live()
高效多了,因?yàn)?code>live()方法總是將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息附加到document元素上。另外,使用.delegate()
方法解決許多其他問題。請(qǐng)參閱下方列出的詳細(xì)信息。
優(yōu)點(diǎn):
- 你可以選擇將選擇器或者事件信息附加到指定的元素。
- 匹配操作實(shí)際上在前面并沒有執(zhí)行,而是用來注冊(cè)到指定的元素。
- 鏈?zhǔn)讲僮骺梢缘玫秸_的支持
- Jquery仍然需要迭代這些選擇器或者事件信息來匹配元素,不過因?yàn)槟憧梢赃x擇哪一個(gè)元素作為根元素,所以篩選的量會(huì)大幅減少
- 因?yàn)檫@項(xiàng)技術(shù)使用了事件委托機(jī)制,它可以匹配到被動(dòng)態(tài)地添加到DOM的元素
- 你可以在文檔加載完之前連接事件處理函數(shù)
缺點(diǎn):
- 從
.bind()
方法不可以直接升級(jí)到.delegate()
方法 - Jquery仍然需要使用marchesSelector方法在附加到指定根元素的選擇器或者事件信息中篩選決定哪一個(gè)事件處理函數(shù)會(huì)被調(diào)用。然而,附加到指定根元素的元數(shù)據(jù)會(huì)比使用
live()
方法的時(shí)候要小得多。 - 當(dāng)操作大量匹配的元素時(shí)會(huì)有性能方面的問題
- 附加操作是在前期完成的,這可能導(dǎo)致頁面加載時(shí)存在性能問題
使用On方法
你知道嗎,在Jquery 1.7版本中.bind()
, .live()
和.delegate()
方法只需要使用.on()
方法一種方式來調(diào)用它們。當(dāng)然.unbind()
, .die()
和.undelegate()
方法也一樣。一下代碼片段是從Jquery 1.7版本的源碼中截取出來的
bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, unbind: function( types, fn ) { return this.off( types, null, fn ); }, live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, die: function( types, fn ) { jQuery( this.context ).off( types, this.selector || "**", fn ); return this; }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }, undelegate: function( selector, types, fn ) { return arguments.length == 1 ? this.off( selector, "**" ) : this.off( types, selector, fn ); }
考慮到這一點(diǎn),使用.on()
方法看起來像以下方式一樣...
/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一種方式來調(diào)用它們 */ // Bind $( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} ); // Live $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} ); // Delegate $( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} );
你可能注意到了,我如何使用.on()
方法決定了它如何調(diào)用其他方法。你可以認(rèn)為.on()
方法被具有不同簽名的方法”重載“了,而這些方法實(shí)現(xiàn)了不同的事件綁定的連接方式。 .on()
方法的出現(xiàn)為API帶來了很多方面的一致性,并希望讓事情變得不那么混亂。
優(yōu)點(diǎn):
- 使各種事件綁定方法一致。
- 因?yàn)樵贘query源碼中
.bind()
,.live()
和.delegate()
方法實(shí)際上是調(diào)用了此方法,因此簡(jiǎn)化了jQuery代碼庫并刪除了一級(jí)重定向。 - 這種方式仍然提供了使用
.delegate()
方法的優(yōu)點(diǎn),并且仍然提供對(duì).bind()
方法的支持,如果你需要的話。
缺點(diǎn):
- 給人帶來了一些疑惑,因?yàn)榉椒ǖ膶?shí)際執(zhí)行方式將根據(jù)你如何調(diào)用方法而改變。
總結(jié)
如果你對(duì)不同的綁定事件方法有所迷惑,那么不要擔(dān)心,因?yàn)锳PI發(fā)展了一段時(shí)間了,有很多前人的經(jīng)驗(yàn)可以借鑒。也有很多人將這些方法視為魔法,不過一旦你了解了他們工作背后的原理,將幫助您了解如何更好地處理項(xiàng)目。
以下是這篇文章的精華所在...
- 使用
.bind()
方法非常浪費(fèi)性能因?yàn)樗淹粋€(gè)事件處理函數(shù)附加到了每一個(gè)匹配的元素上 - 你應(yīng)該停止使用
.live()
方法因?yàn)樗粭売昧送瑫r(shí)也會(huì)帶來很多問題 - 使用
.delegate()
方法會(huì)給你帶來很多好處當(dāng)你需要解決一些性能上的問題和對(duì)動(dòng)態(tài)添加的元素作出處理 - 新的
.on()
方法其實(shí)就是模擬.bind()
,.live()
和.delegate()
實(shí)現(xiàn)的語法糖,具體取決于你如何調(diào)用它 - 新的方向是使用新的
.on()
方法。先熟悉語法,并開始在你的所有的Jquery 1.7版本以上的項(xiàng)目使用它吧!
對(duì)于上面列舉的優(yōu)點(diǎn)或者缺點(diǎn),你有新的補(bǔ)充嗎?你最近開始使用delegate()
方法了嗎?你對(duì)新的.on()
方法怎么看呢?把你的想法寫到用評(píng)論告訴我吧!謝謝!
第一次翻譯,文章中可能會(huì)出現(xiàn)一些不通順的地方,希望得到大家的理解,畢竟我還是個(gè)學(xué)生??!
好了,大概就這樣,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持
相關(guān)文章
實(shí)用jquery操作表單元素的簡(jiǎn)單代碼
下面小編就為大家?guī)硪黄獙?shí)用jquery操作表單元素的簡(jiǎn)單代碼。小編覺得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jquery插件pagination實(shí)現(xiàn)無刷新ajax分頁
這篇文章主要介紹了jquery插件pagination實(shí)現(xiàn)無刷新ajax分頁的相關(guān)資料,需要的朋友可以參考下2015-09-09使用jQuery設(shè)置disabled屬性與移除disabled屬性
Readonly只針對(duì)input和textarea有效,而disabled對(duì)于所有的表單元素都有效,下面為大家介紹下使用jQuery設(shè)置disabled屬性2014-08-08jQuery實(shí)現(xiàn)的鼠標(biāo)滑過彈出放大圖片特效
最近項(xiàng)目遇到個(gè)需求,需要的效果是,鼠標(biāo)移到縮略圖上會(huì)顯示該圖的大圖,并且大圖跟隨鼠標(biāo)移動(dòng);或是移動(dòng)到提示文字上,也可以顯示圖片。經(jīng)過一番思索,用下面的方法實(shí)現(xiàn)了本效果,這里分享給大家。2016-01-01jQuery短信驗(yàn)證倒計(jì)時(shí)功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了jQuery短信驗(yàn)證倒計(jì)時(shí)功能實(shí)現(xiàn)方法,實(shí)例分析了jQuery前臺(tái)倒計(jì)時(shí)功能及ajax交互的相關(guān)技巧,需要的朋友可以參考下2016-05-05jquery.boxy彈出框(后隔N秒后自動(dòng)隱藏/自動(dòng)跳轉(zhuǎn))
對(duì)于 Boxy彈出框的使用之前寫過一些文章(查看jquery.boxy基礎(chǔ)),今天主要是在解決一個(gè)需要之后,覺得值得把它記錄下來,所以就再寫一篇,主要功能是,在彈出對(duì)話框后,隔N秒后自動(dòng)隱藏,還有就是自動(dòng)跳轉(zhuǎn)2013-01-01jQuery窗口拖動(dòng)功能的實(shí)現(xiàn)代碼
本文通過jquery代碼實(shí)現(xiàn)窗口拖動(dòng)功能以及jQuery 鼠標(biāo)拖拽移動(dòng)窗口的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02