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

發(fā)布時間：2020-09-27 15:42:23 來源：腳本之家閱讀：109 作者：mrr 欄目：web開發(fā)

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:

## 點擊相應(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就默認綁定了事件
 $(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)站的支持！

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽