jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別?

(1)、bind 【jQuery 1.3之前】

定義和用法:主要用於給選擇到的元素上綁定特定事件類型的監聽函數;

語法:bind(type,[data],function(eventObject));

特點:

  (1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件,不能給未來新增的元素綁定事件。

  (2)、當頁面加載完的時候,你纔可以進行bind(),所以可能產生效率問題。

實例如下:$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之後】

定義和用法:主要用於給選擇到的元素上綁定特定事件類型的監聽函數;

語法:live(type, [data], fn);

特點:

  (1)、live方法並沒有將監聽器綁定到自己(this)身上,而是綁定到了this.context上了。

  (2)、live正是利用了事件委託機制來完成事件的監聽處理,把節點的處理委託給了document,新添加的元素不必再綁定一次監聽器。

  (3)、使用live()方法但卻只能放在直接選擇的元素後面,不能在層級比較深,連綴的DOM遍歷方法後面使用,即$(“ul”").live...可以,但$("body").find("ul").live...不行; 

實例如下:$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定義和用法:將監聽事件綁定在就近的父級元素上

語法:delegate(selector,type,[data],fn)

特點:

  (1)、選擇就近的父級元素,因爲事件可以更快的冒泡上去,能夠在第一時間進行處理。

  (2)、更精確的小範圍使用事件代理,性能優於.live()。可以用在動態添加的元素上。

實例如下:

$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});

(4)、on 【1.7版本整合了之前的三種方式的新事件綁定機制】

定義和用法:將監聽事件綁定到指定元素上。

語法:on(type,[selector],[data],fn)

實例如下:$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不一樣。

說明:on方法是當前JQuery推薦使用的事件綁定方法,附加只運行一次就刪除函數的方法是one()。

 總結:.bind(), .live(), .delegate(),.on()分別對應的相反事件爲:.unbind(),.die(), .undelegate(),.off()

--------------------- 本文來自 wdlhao 的CSDN 博客 ,全文地址請點擊:https://blog.csdn.net/wdlhao/article/details/79079660?utm_source=copy

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章