JQuery中事件繫結的四種方法及其優缺點

2021-08-20 04:34:08 字數 1973 閱讀 4039

jquery中事件繫結的方法有bind、live、delegate、on

1、bind：bind(type [,data], fn)

.bind，***繫結到目標元素上，會將所有匹配的元素都繫結一次事件。因此，當元素很多時，後來動態新增的元素不會被繫結。

例：

$("#foo").bind('click',function


())
簡寫：

$("#foo").click(function


())
2、live：

.live，***繫結到document上，利用事件委託，可以像呼叫bind一樣呼叫live方法，但兩者的底層實現不一樣。.live繫結的事件也會匹配到那些動態新增的元素，而且，被live繫結的事件只會被附加到document元素上一次，因此提高了效能。

例：

$( "#members li a" ).live( "click", function


( e ) {} );
注意：該方法在1.7版本後被棄用

3、delegate：$(selector).delegate(childselector,event,data,function)

.delegate與.live類似，不會***繫結到你指定的附加元素上，而不是document

上，也利用了事件委託，因此也提高了效能。但是該方法不能直接由bind過渡

例：

$( "#members" ).delegate( "li a", "click", function


( e ) {} );
4、on：$(selector).on(event,childselector,data,function)

bind: function


( types, data, fn ) ,


unbind: function


( types, fn ) ,


live: function


( types, data, fn ) ,


die: function


( types, fn ) ,


delegate: function


( selector, types, data, fn ) ,


undelegate: function


( selector, types, fn )  ); 


$( "#members li a" ).bind( "click", function


( e ) {} );


// live


$( document ).on( "click", "#members li a", function


( e ) {} ); 


$( "#members li a" ).live( "click", function


( e ) {} );


// delegate


$( "#members" ).on( "click", "li a", function


( e ) {} ); 


$( "#members" ).delegate( "li a", "click", function


( e ) {} );
對於只需要觸發一次，隨後就要立即解除繫結的情況，也可以使用one()方法。即在每個物件上，事件處理函式只會被執行一次。

webpack中引用jQuery的四種方式

webpack中是根據乙個入口檔案開始收集依賴。import from jquery 但是乙個專案中通常有很多個地方都用到了jquery，每個模組都要這樣的一行 那麼如何解決這個問題了。webpack內部有個外掛程式，可以幫助到我們，webpack自己的外掛程式 用了這個外掛程式，我們所有檔案都不用...

JQuery中4種事件繫結的區別

只要一提到jquery事件的繫結，第一時間就會想起bind 方法。孤陋寡聞的我今天聽同事提起，才來自己研究了下，發現共有四種事件繫結的方法，分別是 bind live delegate 和on 它們的使用方法都大同小異都是 我用fn代表繫結事件的方法 selecter fn event,data,f...

JQuery中的事件繫結

事件冒泡 在乙個物件上觸發某類事件 比如單擊onclick事件 如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式，如果沒有定義此事件處理程式或者事件返回true，那麼這個事件會向這個物件的父級物件傳播，從裡到外，直至它被處理 父級物件所有同類事件都將被啟用 或者它到達了物件層次的最頂...