溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery中on和bind有哪些區(qū)別

發(fā)布時(shí)間：2020-11-26 10:01:33 來(lái)源：億速云 閱讀：373 作者：栢白 欄目：web開(kāi)發(fā)

今天小編給大家分享的是jquery中on和bind有哪些區(qū)別，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

jquery on和bind的區(qū)別：1、bind方法給每個(gè)子元素都添加一個(gè)事件，會(huì)影響到性能，而on方法不會(huì)；2、bind動(dòng)態(tài)添加元素時(shí)，不能動(dòng)態(tài)綁定事件，而on方法可以。

jquery中on和bind有哪些區(qū)別

  • 該方法適用于所有品牌電腦

jquery on和bind的區(qū)別：

on()方法查看源碼可發(fā)現(xiàn)bind()與delegate()底層都是用on()方法實(shí)現(xiàn);

函數(shù)簽名: bind(type, [data], fn) ,on(type,[selector],[data],fn) .

舉個(gè)栗子:

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
  <button id="add">添加新的p元素</button>
  <p>第一個(gè)p元素</p>
  <p>第二個(gè)p元素</p>
  <p>第三個(gè)p元素</p>
  <p>第四個(gè)p元素</p>
  <p>第五個(gè)p元素</p>
</div>
<script>
$("#add").click(function(){
  $("div").append("<p>這是一個(gè)新的p元素</p>");
});
</script>

用法:

$('div p').bind('click',function(){
    alert($(this).text());
})
$("div").on("click","p",function(){
    alert($(this).text());
})

優(yōu)缺點(diǎn)比較:

bind()方法:

缺點(diǎn):

1.萬(wàn)一子元素非常多，給每個(gè)子元素都添加一個(gè)事件，會(huì)影響到性能；

2.動(dòng)態(tài)添加元素時(shí),不能動(dòng)態(tài)綁定事件

優(yōu)點(diǎn):為單個(gè)元素綁定事件時(shí)書(shū)寫(xiě)方便.(忽略)

on()方法:

1.解決上面兩個(gè)缺點(diǎn).

2.采用事件委托機(jī)制,不是直接為p元素綁定事件，而是為其父元素（或祖先元素也可）綁定事件，當(dāng)在div內(nèi)任意元素上點(diǎn)擊時(shí)，事件會(huì)一層層從event target向上冒泡，直至到達(dá)你為其綁定事件的元素,就會(huì)執(zhí)行事件.

3.調(diào)用的時(shí)候也可能出現(xiàn)問(wèn)題。如果事件目標(biāo)在DOM樹(shù)中很深的位置，這樣一層層冒泡上來(lái)查找與選擇器匹配的元素，又會(huì)影響到性能.

總結(jié):

1.選擇器匹配到的元素比較多時(shí)，不要用bind()迭代綁定

2.用id選擇器時(shí)，可以用bind()

3.需要給動(dòng)態(tài)添加的元素綁定時(shí)，用delegate()或者on()

4.用delegate()和on()方法，dom樹(shù)不要太深

5.盡量使用on()

關(guān)于jquery中on和bind有哪些區(qū)別就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手