先說說為什么要討論這個話題，工作閱歷多一點的WEB前端工程師都知道，我們經常需要對頁面上大量具有某種共性的節點綁定同樣的一個事件處理器，傳統的方式是將這些節點獲取為一個對象集合，然后對每個集合綁定一次事件，很顯然，當集合只有兩三個元素的時候，我們這樣做無所謂。但當數量達到幾十甚至幾百個的時候怎么辦呢？使用這種遍歷對象集依次進行綁定的方式勢必會造成很蛋疼的性能問題。特別是在那些低端瀏覽器上。他們擁有著性能非常可悲的javascript解釋引擎，這給我們那些要求頁面體驗和流暢度的工程師們帶來的無疑是很沉重的打擊。
今天就給大家介紹一個名詞“事件委托”，高手就不要在這里嘲笑我了，我這都是寫給新手看看的。所謂“事件委托”，如同名字一樣，是我們將這個集合中每個元素的事件，委托給某一個元素來處理，這樣我們只需要綁定一個元素的某個事件，就可以達到我們所需要的效果。為了大家能夠清楚的了解其中的原理，我在這里不進行事件綁定的相關講解，綁定的時候只使用DOM0級方法，兼容所有瀏覽器即可。
不廢話，且看代碼，原理在代碼的注釋中寫得很詳細
你也可以直接查看文章后面的無注釋代碼
//事件委托
//這里我們創建bind函數，給了四個參數
//obj,需要綁定事件的節點，
//tar,在obj容器中的需要批量綁定事件的目標元素標簽名
//evName,需要綁定的事件名稱
//fn,需要為目標元素綁定的事件處理函數
var bind = function(obj,tar,evName,fn){
obj['on'+evName] = function(event){
var e = event||window.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 = event||window.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的前端技術博客