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

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

創(chuàng)新互聯(lián)建站是一家專注于成都做網(wǎng)站、成都網(wǎng)站設(shè)計與策劃設(shè)計,姑蘇網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:姑蘇等地區(qū)。姑蘇做網(wǎng)站價格咨詢:13518219792

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ù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

標(biāo)題名稱：jQuery中的on與bind綁定事件區(qū)別實例詳解
文章地址：http://muchs.cn/article14/ijohge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、靜態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容