jquery on和bind的差別是什麼
- coldplay.xixi原創
- 2020-11-25 16:29:092900瀏覽
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) .
舉栗子:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
<button id="add">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script>
$("#add").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
</script>用法:
$('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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn