首頁 > web前端 > js教程 > 主體

javascript中的事件代理初探_javascript技巧

WBOY
發布: 2016-05-16 16:56:23
原創
1001 人瀏覽過

事件在javascript中一直是最強大的物件之一。 javascript提供了addEventListener和attachEvent兩個方法來為DOM節點綁定事件,jquery作了進一步封裝,提供了相容各個瀏覽器的bind方法。現在來看,這種傳統的事件綁定方式存在著以下不足:

1.可能需要綁定很多的EventHander。

假如頁面中某個表有100行,現在必須為每一行綁定一個click事件。那麼就必須綁定100個EventHandler,這對頁面效能來說有著極大的負擔,因為需要創建更多的記憶體來存放這些Handler。

2.事件無法綁定後加入的DOM節點。

假如頁面中的程式碼如下:

複製程式碼 程式碼如下:


程式碼如下:

$$ "#dv").bind('click',function(){alert('test');});

$(body).append('

test
')

後加入的div是無法觸發點擊事件的。


為了解決這兩個問題,javascript引入了事件代理(event proxy)。首先,我們來了解js中的冒泡機制。


基本上所有的瀏覽器都支援事件冒泡。當在某個DOM節點上觸發事件上,事件會一直向上傳遞,一直到文件的根節點。既然所有的節點的事件最終都會傳遞到文檔根節點,那麼我們如果直接將事件綁定到文檔根節點(document節點),然後透過event.target來判斷哪個節點觸發的事件,是不是減少很多EventHandler的綁定呢? jquery中的live方法正式根據這個原理來實現的,下面我們來實現一個live簡單版:
複製程式碼


程式碼如下:


$.fn.mylive=function(eventType,fn){
 var that=this.selector;
 $(document).bind(eventType,function( event){
  var match=$(event.target).closest(that)  if(match.length !== 0){

   fn.apply($(event.target),[event ]);
  }
 })

}


$("#tb td").mylive('click',function(event){
 alert(event.target.innerHTML);
});

var tb='


 
  
  
 
the first column the second column the third column
';

$("body").append(tb);

在live方法中,事件綁定在document節點上,$(event.target).closest(that)來匹配真正觸發事件的元素。 demo中,我們為每個後加入的td都綁定了click事件,點擊不同的td,我們發現會彈出他們對應Text的提示框。 live方法彌補了前面提到的傳統事件綁定方法的兩個不足。但live方法仍存在它的不足之處。看這句程式碼:
複製程式碼


程式碼如下:

$("#tb td" ).mylive('click',function(event){ alert(event.target.innerHTML);

});

它會先根據jquery選擇器遍歷整個文件,找到所有的#tb td元素,將他們儲存成物件。然而,在live的實作方法中,並沒有利用這些對象,而僅僅是將"#td td"作為字串與事件來源進行匹配而已。這就大大增加了很多無謂的消耗。 那麼有沒有辦法改善這個狀況呢? jquery中提供了delegate代理方法,它支援將事件綁定到指定的元素上,而不僅僅是document上。了解了它的原理,我們來實現一個delegate簡單版:
複製程式碼 程式碼如下:

$(body).append('
');

$.fn.mydelegate=function(selector,eventType,fn){
 $(this).bind(eventType,function(event){
  var match=$(event.target).closest( selector);
  if(match.length !== 0){
   fn.apply($(event.target),[event]);
  }
 });
);

}

 });
}

$("#dv").mydelegate('td','click',function(event){
 alert(event.target.innerHTML);
});

var tb='


 
  
  
 
the first column the second column the third column
';$("dv").append(tb);

mydeletage方法不需要取得所有的td對象,而只需要取得綁定事件的div對象。這在執行效率上要優於live方法。

這裡僅僅起到一個拋磚引玉的作用,讓大家了解到事件代理的原理而已,jquery中的live和delegate實現要復雜的多。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!