on(events,[selector],[data],fn)
events:一個或多個用空格分隔的事件類型和可選的命名空間,如”click”或”keydown.myPlugin” 。 selector:一個選擇器字符串用于過濾器的觸發事件的選擇器元素的后代. data:當一個事件被觸發時要傳遞event.data給事件處理函數。 fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫,返回false。 bind(type,[data],fn) 為每個匹配元素的特定事件綁定事件處理函數。 jQuery 3.0中已棄用此方法,請用 on()代替。 參數類型跟前面那個on一樣.bind與on的區別就在于–事件冒泡
demo1:
## 點擊相應的li彈出里面內容,這里把on換成bind是一樣的沒有區別.也就是說on不使用selector屬性與bind并無區別
<ul> <li>1</li> <li>2</li> <li>3</li></ul><script> $(function () { $('ul li').on('click',function(){ alert($(this).text()) }); })</script>demo2:
<script> // 這種情況你會發現點擊第四個不具備事件.也就是不具備動態綁定事件能力 $(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>事件委托的好處
萬一子元素非常多,給每個子元素都添加一個事件,會影響到性能; 為動態添加的元素也能綁上指定事件;以上所述是小編給大家介紹的jQuery中的on與bind綁定事件區別實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持!
新聞熱點
疑難解答
圖片精選