jQuerybind、delegate、live和on比較-創(chuàng)新互聯(lián)

JQuery的delegate()方法是給頁面里的元素(或者頁面里未來將會有的元素)綁定事件,同樣的從結(jié)果來看JQuery的bind()方法同樣也是給元素綁定事件,但是它(bind)只能給頁面中當(dāng)前已經(jīng)存在的元素去綁定事件。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),新吳企業(yè)網(wǎng)站建設(shè),新吳品牌網(wǎng)站建設(shè),網(wǎng)站定制,新吳網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,新吳網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

JQuery的live()方法同樣也是給元素綁定事件,但是它(live)在頁面有改動的時候,JQuery把相應(yīng)函數(shù)綁定到$(document)元素上。任何時候只要有事件冒泡到document節(jié)點上,它就查看該事件是否是一個綁定事件,以及該事件的目標(biāo)元素與這一選擇器是否匹配,如果都是的話,則執(zhí)行函數(shù)。JQuery 1.7以后就不支持live()了。

JQuery的on()方法同樣也是給元素綁定事件,它(on)是整合了之前的三種方式的新事件綁定機(jī)制。

例子:

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $("div").delegate("p","click",function(){

  $(this).slideToggle();

 });

 $("button").click(function(){

  $("<p>這是一個新段落。</p>").insertAfter("button");

 });

});

</script>

</head>

<body>

<div >

<p>這是一個段落。</p>

<p>請點擊任意一個 p 元素,它會消失。包括本段落。</p>

<button>在本按鈕后面插入一個新的 p 元素</button>

</div>

<p><b>注釋:</b>通過使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素會受到影響。</p>

</body>

</html>

標(biāo)紅的P是通過點擊button才能被加載到頁面的,也就是說,在document.ready的時候頁面里還沒有這個P元素,所以說需要用delegate()方法給P綁定事件,此時用click()或者bind()是做不到給可能被加載到這個頁面的P元素綁定事件的。

但是這個button是頁面中已經(jīng)存在的,用click就可以給綁定上事件。當(dāng)然了,用delegate()也行。

為什么選擇.live()或.delegate()而不是.bind()

畢竟,bind看起來似乎更加的明確和直接,難道不是嗎?嗯,有兩個原因讓我們更愿意選擇delegate或live而不是bind:

1. 為了把處理程序附加到可能還未存在于DOM中的DOM元素之上。因為bind是直接把處理程序綁定到各個元素上,它不能把處理程序綁定到還未存在于頁面中的元素之上。

2. 如果你運行了$('a').bind(…),而后新的鏈接經(jīng)由AJAX加入到了頁面中,則你的bind處理程序?qū)τ谶@些新加入的鏈接來說是無效的。而另一方面live和delegate則是被綁定到另一個祖先節(jié)點上,因此其對于任何目前或是將來存在于該祖先元素之內(nèi)的元素都是有效的。

3. 或者為了把處理程序附加到單個元素上或是一小組元素之上,監(jiān)聽后代元素上的事件而不是循環(huán)遍歷并把同一個函數(shù)逐個附加到DOM中的100個元素上。把處理程序附加到一個(或是一小組)祖先元素上而不是直接把處理程序附加到頁面中的所有元素上,這種做法帶來了性能上的好處。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目:jQuerybind、delegate、live和on比較-創(chuàng)新互聯(lián)
本文來源:http://muchs.cn/article20/dcpoco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、網(wǎng)站建設(shè)、做網(wǎng)站、App設(shè)計域名注冊

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

微信小程序開發(fā)