jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解

更新時(shí)間：2017年02月28日 14:28:55 投稿：mrr

bind與on的區(qū)別就在于–事件冒泡，關(guān)于jquery中的on與bind綁定事件的區(qū)別通過(guò)本文給大家實(shí)例講解，需要的朋友參考下吧

on(events,[selector],[data],fn)

events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，如”click”或”keydown.myPlugin” 。
selector:一個(gè)選擇器字符串用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代.
data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡(jiǎn)寫(xiě)，返回false。
bind(type,[data],fn)
為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。
jQuery 3.0中已棄用此方法，請(qǐng)用 on()代替。
參數(shù)類型跟前面那個(gè)on一樣.

bind與on的區(qū)別就在于–事件冒泡

demo1:

## 點(diǎn)擊相應(yīng)的li彈出里面內(nèi)容,這里把on換成bind是一樣的沒(méi)有區(qū)別.也就是說(shuō)on不使用selector屬性與bind并無(wú)區(qū)別

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<script>
 $(function () {
  $('ul li').on('click',function(){
   alert($(this).text())
  }); 
 })
</script>

demo2:

<script>
 // 這種情況你會(huì)發(fā)現(xiàn)點(diǎn)擊第四個(gè)不具備事件.也就是不具備動(dòng)態(tài)綁定事件能力
 $(function () {
  $('ul li').bind('click',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);

 })
</script>

demo3

<script>
 // 換成on的寫(xiě)法,添加selector屬性,就是通過(guò)事件冒泡,進(jìn)行了事件委托,把li的事件委托給其父元素,點(diǎn)擊后面加入的li就默認(rèn)綁定了事件
 $(function () {
  $('ul').on('click','li',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);
 })
</script>

事件委托的好處

萬(wàn)一子元素非常多，給每個(gè)子元素都添加一個(gè)事件，會(huì)影響到性能；
為動(dòng)態(tài)添加的元素也能綁上指定事件；

以上所述是小編給大家介紹的jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

jquery Validation表單驗(yàn)證使用詳解
功能強(qiáng)大的 jquery 表單驗(yàn)證插件，適用于日常的 E-mail、電話號(hào)碼、網(wǎng)址等驗(yàn)證及 Ajax 驗(yàn)證，除自身?yè)碛胸S富的驗(yàn)證規(guī)則外，還可以添加自定義的驗(yàn)證規(guī)則。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
2015-04-04
jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能
圖片上傳，網(wǎng)上有好多版本，今天小編給大家分享jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能，感興趣的的朋友一起看看吧
2017-08-08
Jquery easyui 下loaing效果示例代碼
本文為大家詳細(xì)介紹下Jquery easyui 下loaing效果具體是如何實(shí)現(xiàn)的，感興趣的各位可以參考下
2013-08-08
jQuery 1.5 源碼解讀面向中高階JSER
jQuery 1.5 源碼有8068行。很多想讀 jQuery 源碼的童鞋在讀了一半不到就不敢往下讀了，jQuery是一個(gè) 封裝良好、代碼緊湊的框架。
2011-04-04
jQuery過(guò)濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字
這篇文章主要介紹了jQuery過(guò)濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05
jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery的ajax下載blob文件
這篇文章主要介紹了jQuery的ajax下載blob文件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實(shí)例代碼
我在這里將jQuery Ajax 調(diào)用Aspx.Net WebService 的幾個(gè)常用的方法做了一個(gè)整理，提供給正在找這方面內(nèi)容的博友，希望能給學(xué)習(xí)jQuery的朋友一點(diǎn)幫助，可以直接復(fù)制代碼運(yùn)行。
2011-04-04
非常有用的40款jQuery 插件推薦（系列二）
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開(kāi)發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶體驗(yàn)
2011-12-12
jQuery easyui刷新當(dāng)前tabs的方法
這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法，本文涉及到param參數(shù)的屬性知識(shí)點(diǎn)，本文通過(guò)實(shí)例給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-09-09