2016-9-23 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
雖說(shuō)事件處理程序可以為現(xiàn)代 Web 頁(yè)面添加很強(qiáng)的交互能力，但是不分青紅皂白就添加大量的事件處理程序絕對(duì)是一種愚蠢的行為。
我們來(lái)分析一下：事件處理程序本質(zhì)上是一種函數(shù)，是一種對(duì)象，存放在內(nèi)存中，設(shè)置大量的事件處理程序會(huì)使內(nèi)存中的對(duì)象變多，Web 程序的性能會(huì)變得越來(lái)越差，用戶體驗(yàn)很不好。
為了更好地利用好事件處理程序，便出現(xiàn)了事件委托，用來(lái)提升性能。
事件委托（event delegation）：把若干個(gè)子節(jié)點(diǎn)上的相同事件的處理函數(shù)綁定到它的父節(jié)點(diǎn)上去，在父節(jié)點(diǎn)上統(tǒng)一處理從子節(jié)點(diǎn)冒泡上來(lái)的事件，這種技術(shù)就叫做事件委托。
補(bǔ)充一下：事件委托并不局限于父節(jié)點(diǎn)與子節(jié)點(diǎn)之間。也可以這樣玩，比如頁(yè)面文檔中有好多個(gè)處在不同位置地 button，都是綁定 click 事件，使用事件委托，我們可以把這些個(gè)事件統(tǒng)一綁定到 body 元素，然后再進(jìn)行處理（雖然一般很少這么用）。
下面舉例子逐步說(shuō)明事件委托的優(yōu)勢(shì)：
<ul id="parent-list"> <li id="list-1">List 1</li> <li id="list-2">List 2</li> <li id="list-3">List 3</li> <li id="list-4">List 4</li> <li id="list-5">List 5</li> </ul>
假設(shè)有上面的代碼，我們現(xiàn)在有一個(gè)需求：就是無(wú)論單擊上面的列表（ul）的哪個(gè)子列表（li），都會(huì)彈出一個(gè)框，來(lái)顯示我們點(diǎn)擊了哪個(gè)子列表。
需求不難吧？有了需求，接下來(lái)是該寫 js 代碼了，現(xiàn)在有兩種方法放在你眼前：1. 為每個(gè) li 子元素綁定 click 事件，然后設(shè)置處理函數(shù)； 2. 利用事件委托，為 ul 父元素綁定 click 事件，然后設(shè)置處理函數(shù)
// 方法一 var list1 = document.getElementById("list-1");
list1.addEventListener("click",function(){
alert(this.firstChild.nodeValue);
},false); var list2 = document.getElementById("list-2");
list2.addEventListener("click", function() {
alert(this.firstChild.nodeValue);
}, false); var list3 = document.getElementById("list-3");
list3.addEventListener("click", function() {
alert(this.firstChild.nodeValue);
}, false); var list4 = document.getElementById("list-4");
list4.addEventListener("click", function() {
alert(this.firstChild.nodeValue);
}, false); var list5 = document.getElementById("list-5");
list5.addEventListener("click", function() {
alert(this.firstChild.nodeValue);
}, false);
// 方法二 var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){ var target = event.target; if(target.nodeName.toLowerCase() === "li"){
alert(target.firstChild.nodeValue);
}
},false);
看著上面的代碼，我這里寫幾點(diǎn)方法二的優(yōu)點(diǎn)：1. 減少了訪問(wèn) DOM 的次數(shù)，提升了性能；2. 將子元素的事件處理程序統(tǒng)一綁定到其父元素，減少了對(duì)內(nèi)存的占用；3. 可以更好地管理事件處理程序，比如移除對(duì)某個(gè)事件處理程序的引用
注意：如果對(duì)各個(gè)子元素的需求不一樣，我們還可以這樣來(lái)改寫上面的方法二：
// 方法二 var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){ var target = event.target; if(target.nodeName.toLowerCase() === "li"){ switch(target.id){ case "list-1":
alert("學(xué)的越多，越覺得自己無(wú)知！"); break; case "list-2":
alert("愛是一種藝術(shù)！"); break; case "list-3":
target.innerHTML = "呵呵，我改了啊！"; break; case "list-4":
target.style.background = "#aaa"; break; case "list-5":
target.style.color = "red";
target.style.fontSize = "2em"; break; default: break;
}
}
},false);
因?yàn)槭录幸蕾囀录芭輽C(jī)制，所以，并不是所有的事件都可以進(jìn)行事件委托。
最適合采用事件委托的事件包括：click、mousedown、mouseup、keydown、keyup 和 keypress。
事件委托只是一種非常不錯(cuò)的事件綁定的思想，所以不應(yīng)該拘泥于上面的例子，要活學(xué)活用！ ^_^
我們前面說(shuō)過(guò)，事件處理程序存在于內(nèi)存中，每當(dāng)將事件處理程序指定給元素時(shí)，運(yùn)行中的瀏覽器代碼與支持頁(yè)面交互的 JavaScript 代碼之間就會(huì)建立一個(gè)連接。這種連接越多，頁(yè)面執(zhí)行就越慢。前面所說(shuō)的事件委托就是用來(lái)限制建立的連接數(shù)量。
還有，就是內(nèi)存中那些使用完后不再使用的事件處理程序，如果不釋放掉，也會(huì)影響 Web 應(yīng)用程序的內(nèi)存和性能。
<button id="button">提交</button> var button = document.getElementById("button");
button.onclick = function(){ // 提交某個(gè)表單的操作代碼 button.onclick = null; // 移除事件處理程序 event.target.firstChild.nodeValue = "提交中。。。";
};
總的原則就是：移除掉那些過(guò)時(shí)不再使用的事件處理程序，釋放內(nèi)存！
藍(lán)藍(lán)設(shè)計(jì)( www.devb.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.devb.cn