百度權重查詢 站長交易 友情鏈接交換 網站監控 服務器監控 seo監控

先說說為什么要討論這個話題，工作閱歷多一點的WEB前端工程師都知道，我們經常需要對頁面上大量具有某種共性的節點綁定同樣的一個事件處理器，傳統的體例是將這些節點獲取為一個對象薈萃，然后對每個薈萃綁定一次事件，很顯然，當薈萃只有兩三個元素的時候，我們這樣做無所謂。但當數量達到幾十甚至幾百個的時候怎么辦呢？使用這種遍歷對象集依次進行綁定的體例勢必會造成很蛋疼的性能問題。特殊是在那些低端瀏覽器上。他們擁有著性能特別很是可悲的javascript詮釋引擎，這給我們那些要求頁面體驗和流暢度的工程師們帶來的無疑是很沉重的襲擊。

今天就給大家介紹一個名詞“事件委托”，高手就不要在這里嘲笑我了，我這都是寫給新手看看的。所謂“事件委托”，如同名字一樣，是我們將這個薈萃中每個元素的事件，委托給某一個元素來處理，這樣我們只需要綁定一個元素的某個事件，就可以達到我們所需要的效果。為了大家能夠清楚的了解其中的原理，我在這里不進行事件綁定的相關講解，綁定的時候只使用DOM0級方法，兼容所有瀏覽器即可。

不廢話，且看代碼，原理在代碼的注釋中寫得很具體

你也可以直接查看文章后面的無注釋代碼

//事件委托

//這里我們創建bind函數，給了四個參數

//obj,需要綁定事件的節點，

//tar,在obj容器中的需要批量綁定事件的目標元素標簽名

//evName,需要綁定的事件名稱

//fn,需要為目標元素綁定的事件處理函數

var bind = function(obj,tar,evName,fn){

obj['on'+evName] = function(event){

var e = eventwindow.event,

//首先對event做兼容，window.event主要用于兼容IE

target = e.target e.srcElement,

//對target做兼容，e.srcElement主要用于兼容IE，這里獲取的是觸發事件的目標元素

bool = true;

//設置一個bool型變量，后面會用到

if(target != obj){

//這一步比較主要，判斷target是否和obj相等，目的在于區別觸發事件的元素是否為綁定事件的元素自己，假如是，很顯明不吻合要求，因為我們要觸發事件的對象應該是綁定元素內的某一些元素。

(function(){

//這里做了一個匿名函數，主要用于循環判斷我們觸發事件的元素（target）是否在我們的目標元素（tar）內

if(target.tagName != tar.toUpperCase()){

//判斷觸發事件的元素標簽名（tagName）是否和我們提供的目標元素的標簽名（tar）相等，

target = target.parentNode;

//假如不是目標元素，則尋找觸發事件元素的父元素，并修改target指向這個父元素

if(target!=obj){

//判斷修悛改后的target是否為我們綁定事件的元素

arguments.callee();

//假如不是我們綁定事件的元素，則重新運行這個匿名函數

}else{

bool = false;

//假如是這個我們綁定事件的元素，則休止重新運行這個匿名函數，因為這代表我們的循環已經達到了綁定事件的元素，再往外查找已經沒有需要了，這里將bool設置為false

}

}

})();

//這里的空括號用于執行匿名函數

if(bool){fn(target);}

//判斷是bool是否為true,假如為true，透露表現我們觸發事件的元素在目標元素(tar)內，運行事件處理函數，并傳入目標元素對象，假如為false，則相反。

}

}

}

看完上面的代碼，難免大家有點迷糊，其實這里面有兩個要點，我來總結一下，大家便曉暢了

、通過給obj容器綁定事件，然后通過target來得到觸發這個事件的對象

第二、行使里面的匿名函數進行循環，檢測觸發事件的元素是否為我們想要委托的對象

附上邏輯圖

無注釋版本代碼

var bind = function(obj,tar,evName,fn){

obj['on'+evName] = function(event){

var e = eventwindow.event,

target = e.target e.srcElement,

bool = true;

if(target != obj){

(function(){

if(target.tagName != tar.toUpperCase()){

target = target.parentNode;

if(target!=obj){

arguments.callee();

}else{

bool = false;

}

}

})();

if(bool){fn(target);}

}

}

}

本文來自：webzhan的前端技術博客