百度權(quán)重查詢 站長(zhǎng)交易 友情鏈接交換 網(wǎng)站監(jiān)控 服務(wù)器監(jiān)控 seo監(jiān)控

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

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

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

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

//事件委托

//這里我們創(chuàng)建bind函數(shù)，給了四個(gè)參數(shù)

//obj,需要綁定事件的節(jié)點(diǎn)，

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

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

//fn,需要為目標(biāo)元素綁定的事件處理函數(shù)

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

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

var e = eventwindow.event,

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

target = e.target e.srcElement,

//對(duì)target做兼容，e.srcElement主要用于兼容IE，這里獲取的是觸發(fā)事件的目標(biāo)元素

bool = true;

//設(shè)置一個(gè)bool型變量，后面會(huì)用到

if(target != obj){

//這一步比較主要，判斷target是否和obj相等，目的在于區(qū)別觸發(fā)事件的元素是否為綁定事件的元素自己，假如是，很顯明不吻合要求，因?yàn)槲覀円�觸發(fā)事件的對(duì)象應(yīng)該是綁定元素內(nèi)的某一些元素。

(function(){

//這里做了一個(gè)匿名函數(shù)，主要用于循環(huán)判斷我們觸發(fā)事件的元素（target）是否在我們的目標(biāo)元素（tar）內(nèi)

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

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

target = target.parentNode;

//假如不是目標(biāo)元素，則尋找觸發(fā)事件元素的父元素，并修改target指向這個(gè)父元素

if(target!=obj){

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

arguments.callee();

//假如不是我們綁定事件的元素，則重新運(yùn)行這個(gè)匿名函數(shù)

}else{

bool = false;

//假如是這個(gè)我們綁定事件的元素，則休止重新運(yùn)行這個(gè)匿名函數(shù)，因?yàn)檫@代表我們的循環(huán)已經(jīng)達(dá)到了綁定事件的元素，再往外查找已經(jīng)沒(méi)有需要了，這里將bool設(shè)置為false

}

}

})();

//這里的空括號(hào)用于執(zhí)行匿名函數(shù)

if(bool){fn(target);}

//判斷是bool是否為true,假如為true，透露表現(xiàn)我們觸發(fā)事件的元素在目標(biāo)元素(tar)內(nèi)，運(yùn)行事件處理函數(shù)，并傳入目標(biāo)元素對(duì)象，假如為false，則相反。

}

}

}

看完上面的代碼，難免大家有點(diǎn)迷糊，其實(shí)這里面有兩個(gè)要點(diǎn)，我來(lái)總結(jié)一下，大家便曉暢了

、通過(guò)給obj容器綁定事件，然后通過(guò)target來(lái)得到觸發(fā)這個(gè)事件的對(duì)象

第二、行使里面的匿名函數(shù)進(jìn)行循環(huán)，檢測(cè)觸發(fā)事件的元素是否為我們想要委托的對(duì)象

附上邏輯圖

無(wú)注釋版本代碼

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);}

}

}

}

本文來(lái)自：webzhan的前端技術(shù)博客