jquery on和bind的區別:1、bind方法在每個子元素中加入一個事件,會影響到效能,而on方法不會;2、bind動態加入元素時,不能動態綁定事件,而on方法可以。
本教學操作環境:windows7系統、jquery1.10.2版,此方法適用於所有品牌電腦。
jquery on和bind的差異:
on()方法查看原始碼可發現bind()
與delegate()
底層都是用on()方法實作;
函數簽章: bind(type, [data], fn) ,on(type,[selector],[data],fn) .
舉栗子:
第一个p元素
第二个p元素
第三个p元素
第四个p元素
第五个p元素
用法:
$('div p').bind('click',function(){ alert($(this).text()); }) $("div").on("click","p",function(){ alert($(this).text()); })
優缺點比較:
bind()方法:
缺點:
1.萬一子元素非常多,給每個子元素都添加一個事件,會影響到性能;
2.動態添加元素時,不能動態綁定事件
優點:為單一元素綁定事件時書寫方便.(忽略)
#on()方法:
1 .解決上面兩個缺點.
2.採用事件委託機制,不是直接為p元素綁定事件,而是為其父元素(或祖先元素也可)綁定事件,當在div內任意元素上點選時,事件會一層層從event target向上冒泡,直至到達你為其綁定事件的元素,就會執行事件.
3.調用的時候也可能出現問題。如果事件目標在DOM樹中很深的位置,這樣一層層冒泡上來查找與選擇器匹配的元素,又會影響到性能.
總結:
#1.選擇器符合到的元素比較多時,不要用bind()迭代綁定
2.用id選擇器時,可以用bind()
3.需要給動態加入的元素綁定時,用delegate()或on()
4.用delegate()和on()方法,dom樹不要太深
5.盡量使用on()
相關免費學習推薦:javascript(影片)
以上是jquery on和bind的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!