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

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

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

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

events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，如”click”或”keydown.myPlugin” 。
selector:一個(gè)選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代.
data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡寫，返回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是一樣的沒有區(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>
 // 這種情況你會(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的寫法,添加selector屬性,就是通過事件冒泡,進(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>

事件委托的好處

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

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

您可能感興趣的文章:

相關(guān)文章

jQuery獲取字符串中出現(xiàn)最多的數(shù)
這篇文章主要介紹了jQuery獲取字符串中出現(xiàn)最多的數(shù) 的相關(guān)資料,需要的朋友可以參考下
2016-02-02
jQuery ajax請(qǐng)求返回list數(shù)據(jù)動(dòng)態(tài)生成input標(biāo)簽,并把list數(shù)據(jù)賦值到input標(biāo)簽
這篇文章主要介紹了jQuery ajax請(qǐng)求返回list數(shù)據(jù)動(dòng)態(tài)生成input標(biāo)簽,并把list數(shù)據(jù)賦值到input標(biāo)簽的相關(guān)資料,需要的朋友可以參考下
2016-03-03
讀jQuery之十事件模塊概述
jQuery的事件模塊是較復(fù)雜的，前面僅僅提到了對(duì)事件對(duì)象的包裝。即統(tǒng)一了一些兼容性的問題。這篇會(huì)綜述下jQuery的整個(gè)事件模塊。
2011-06-06
jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式
jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式，需要的朋友可以參考一下
2013-03-03
jQuery中on綁定事件后引發(fā)的事件冒泡問題如何解決
這篇文章主要介紹了jQuery中on綁定事件后引發(fā)的事件冒泡問題及解決辦法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-05-05
基于jquery二維碼生成插件qrcode
這篇文章主要為大家詳細(xì)介紹了基于jquery二維碼生成插件qrcode的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
jQuery序列化form表單數(shù)據(jù)為JSON對(duì)象的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery序列化form表單數(shù)據(jù)為JSON對(duì)象的實(shí)現(xiàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
如何使用jquery控制CSS樣式,并且取消Css樣式(如背景色,有實(shí)例)
使用jquery控制CSS樣式,并且取消Css樣式的一個(gè)簡單小實(shí)例，需要的朋友可以參考下
2013-07-07
layui彈出層效果實(shí)現(xiàn)代碼
layer是一款近年來備受青睞的web彈層組件，這篇文章主要介紹了layui彈出層效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02