欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年02月28日 14:28:55   投稿：mrr  
bind與on的區(qū)別就在于–事件冒泡，關(guān)于jquery中的on與bind綁定事件的區(qū)別通過本文給大家實例講解，需要的朋友參考下吧

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

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

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

demo1:

## 點擊相應(yīng)的li彈出里面內(nèi)容,這里把on換成bind是一樣的沒有區(qū)別.也就是說on不使用selector屬性與bind并無區(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>
 // 這種情況你會發(fā)現(xiàn)點擊第四個不具備事件.也就是不具備動態(tài)綁定事件能力
 $(function () {
  $('ul li').bind('click',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);

 })
</script>

demo3

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

事件委托的好處

  • 萬一子元素非常多，給每個子元素都添加一個事件，會影響到性能；
  • 為動態(tài)添加的元素也能綁上指定事件；

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

相關(guān)文章

  • jquery Validation表單驗證使用詳解

    jquery Validation表單驗證使用詳解

    功能強大的 jquery 表單驗證插件，適用于日常的 E-mail、電話號碼、網(wǎng)址等驗證及 Ajax 驗證，除自身擁有豐富的驗證規(guī)則外，還可以添加自定義的驗證規(guī)則。兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
    2015-04-04
  • jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能

    jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能

    圖片上傳，網(wǎng)上有好多版本，今天小編給大家分享jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能，感興趣的的朋友一起看看吧
    2017-08-08
  • Jquery easyui 下loaing效果示例代碼

    Jquery easyui 下loaing效果示例代碼

    本文為大家詳細(xì)介紹下Jquery easyui 下loaing效果具體是如何實現(xiàn)的，感興趣的各位可以參考下
    2013-08-08
  • jQuery 1.5 源碼解讀 面向中高階JSER

    jQuery 1.5 源碼解讀 面向中高階JSER

    jQuery 1.5 源碼有8068行。很多想讀 jQuery 源碼的童鞋在讀了一半不到就不敢往下讀了，jQuery是一個 封裝良好、代碼緊湊 的框架。
    2011-04-04
  • jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字

    jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字

    這篇文章主要介紹了jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
    2016-05-05
  • jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果

    jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果

    這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效，感興趣的小伙伴們可以參考一下
    2015-11-11
  • jQuery的ajax下載blob文件

    jQuery的ajax下載blob文件

    這篇文章主要介紹了jQuery的ajax下載blob文件的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-07-07
  • jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實例代碼

    jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實例代碼

    我在這里將jQuery Ajax 調(diào)用Aspx.Net WebService 的幾個常用的方法做了一個整理，提供給正在找這方面內(nèi)容的博友，希望能給學(xué)習(xí)jQuery的朋友一點幫助，可以直接復(fù)制代碼運行。
    2011-04-04
  • 非常有用的40款jQuery 插件推薦（系列二）

    非常有用的40款jQuery 插件推薦（系列二）

    jQuery 是一個非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開發(fā)項目中扮演著重要角色。jQuery 使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶體驗
    2011-12-12
  • jQuery easyui刷新當(dāng)前tabs的方法

    jQuery easyui刷新當(dāng)前tabs的方法

    這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法，本文涉及到param參數(shù)的屬性知識點，本文通過實例給大家介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看看吧
    2016-09-09

最新評論