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

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

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

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

events:一個或多個用空格分隔的事件類型和可選的命名空間，如”click”或”keydown.myPlugin” 。
selector:一個選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代.
data:當一個事件被觸發(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:

## 點擊相應的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就默認綁定了事件
 $(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ū)別實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

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