1. 程式人生 > >JQurey事件繫結方法與區別

JQurey事件繫結方法與區別

JQurey中用於繫結事件的方法包括bind()、live()、delegate()和on()。

$(selector).bind(event, data, function)
//jquery1.9版本以下支援,jquery1.9及其以上版本刪除了此方法 
$(selector).live(event, data, function)
//jquery1.4.2及其以上版本
$(selector).delegate(childSelector, event, data, function)
//jquery1.7及其以上版本;jquery1.7版本出現之後用於替代bind()live()
繫結事件方式; $(selector).on(event, childselector, data, function)

註解:
event:必需項;新增到元素的一個或多個事件,例如 click,dblclick等;
單事件處理:例如 $(selector).bind("click",data,function)
多事件處理:
1. 利用空格分隔多事件,例如 $(selector).bind("click dbclick ",data,function)
2. 利用大括號靈活定義多事件,例如 $(selector).bind({event1:function, event2:function, ...})

 
  空格相隔方式:繫結較為死板,不能給事件單獨繫結函式,適合處理多個事件呼叫同一函式情況;大括號替代方式:繫結較為靈活,可以給事件單獨繫結函式;
data:可選;需要傳遞的引數;
function:必需;當繫結事件發生時,需要執行的函式;適用所有版本。
A. bind方法
1. 從jQuery 1.0開始存在
2. 直接繫結在元素上,跨瀏覽器,可以很好的解決相容問題
3. 簡單的實現方法(如.click(), .hover())
4. 對於利用id選出來的元素是非常好的,不僅僅是很快的可以hook上,而且當事件發生時,方法可以立即被執行(相對於後面的live, delegate)實現方式
缺點:
1. 它會繫結事件到所有的選出來的元素上,但不會繫結到在它執行完後動態新增的那些元素
2. 存在效率問題:當匹配元素多時;
3. 當頁面載入完的時候,才可以進行bind(),影響載入效率
B. live方法
1. 通過冒泡的方式來繫結到元素上的, 使用的是事件委託的概念, 更適合列表型別的,繫結到document DOM節點上。
2. 一旦事件冒泡到document上,jQuery將會查詢selector/event metadata,然後決定那個handler應該被呼叫。
3. 當handler在執行的時候,因為有冒泡的參與,確實會有一些延遲,但是繫結的時候是特別的快。
4. 和.bind()相比的時候有一個好處就是我們不需要在每個元素上再去繫結事件,而只在document上繫結一次就可以了。儘管這個不是最快的方式,但是確實是最少浪費的。
優點:
1. 僅有一次的事件繫結,繫結到document上
2. 動態新增的element可觸發早已繫結的事件
3. 可以在document ready之前,繫結那些需要的事件
缺點:
1. 從1.7開始已經不被推薦了,所以你也要開始逐步淘汰它了
2. 當使用event.stopPropagation()(或cancelBubble)是無效的
3. 效率問題:所有的selector/event都被繫結到document, 所以查詢時那個事件被呼叫時,會非常慢;當發生事件的元素在你的DOM樹中很深的時候,會有效率問題
C. delegate方法
1. 更精確的小範圍使用事件代理,效能優於.live(), 直接繫結在元素上
2. jQuery仍需要迭代查詢所有的selector/event來決定那個子元素來匹配
3. 可以決定繫結在根元素上,有效的減小你所要查詢的元素
4. 可以用在動態新增的元素上
D. on方法
JQurey 1.9版本整合了之前的三種方式的新事件繫結機制,通過on來進行繫結事件,通過off來進行解綁。