JavaScript 事件對內存和性能的影響
雖說事件處理程序可以為現(xiàn)代 Web 頁面添加很強的交互能力，但是不分青紅皂白就添加大量的事件處理程序絕對是一種愚蠢的行為。
我們來分析一下：事件處理程序本質上是一種函數(shù)，是一種對象，存放在內存中，設置大量的事件處理程序會使內存中的對象變多，Web 程序的性能會變得越來越差，用戶體驗很不好。
為了更好地利用好事件處理程序，便出現(xiàn)了事件委托，用來提升性能。
事件委托
事件委托（event delegation）：把若干個子節(jié)點上的相同事件的處理函數(shù)綁定到它的父節(jié)點上去，在父節(jié)點上統(tǒng)一處理從子節(jié)點冒泡上來的事件，這種技術就叫做事件委托。
補充一下：事件委托并不局限于父節(jié)點與子節(jié)點之間。也可以這樣玩，比如頁面文檔中有好多個處在不同位置地 button，都是綁定 click 事件，使用事件委托，我們可以把這些個事件統(tǒng)一綁定到 body 元素，然后再進行處理（雖然一般很少這么用）。
下面舉例子逐步說明事件委托的優(yōu)勢：
<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>
假設有上面的代碼，我們現(xiàn)在有一個需求：就是無論單擊上面的列表（ul）的哪個子列表（li），都會彈出一個框，來顯示我們點擊了哪個子列表。
需求不難吧？有了需求，接下來是該寫 js 代碼了，現(xiàn)在有兩種方法放在你眼前：1. 為每個 li 子元素綁定 click 事件，然后設置處理函數(shù)； 2. 利用事件委托，為 ul 父元素綁定 click 事件，然后設置處理函數(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);
看著上面的代碼，我這里寫幾點方法二的優(yōu)點：1. 減少了訪問 DOM 的次數(shù)，提升了性能；2. 將子元素的事件處理程序統(tǒng)一綁定到其父元素，減少了對內存的占用；3. 可以更好地管理事件處理程序，比如移除對某個事件處理程序的引用
注意：如果對各個子元素的需求不一樣，我們還可以這樣來改寫上面的方法二：
// 方法二
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("學的越多，越覺得自己無知！");
break;
case "list-2":
alert("愛是一種藝術！");
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);
因為事件委托依賴事件冒泡機制，所以，并不是所有的事件都可以進行事件委托。
最適合采用事件委托的事件包括：click、mousedown、mouseup、keydown、keyup 和 keypress。
事件委托只是一種非常不錯的事件綁定的思想，所以不應該拘泥于上面的例子，要活學活用！ ^_^
移除事件處理程序
我們前面說過，事件處理程序存在于內存中，每當將事件處理程序指定給元素時，運行中的瀏覽器代碼與支持頁面交互的 JavaScript 代碼之間就會建立一個連接。這種連接越多，頁面執(zhí)行就越慢。前面所說的事件委托就是用來限制建立的連接數(shù)量。
還有，就是內存中那些使用完后不再使用的事件處理程序，如果不釋放掉，也會影響 Web 應用程序的內存和性能。
<button id="button">提交</button>
var button = document.getElementById("button");
button.onclick = function(){
// 提交某個表單的操作代碼
button.onclick = null; // 移除事件處理程序
event.target.firstChild.nodeValue = "提交中。。。";
};
總的原則就是：移除掉那些過時不再使用的事件處理程序，釋放內存！
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
Javascript實現(xiàn)html轉pdf高清版（提高分辨率）
這篇文章主要介紹了Javascript將html轉成pdf高清版（提高分辨率）,需要的朋友可以參考下2020-02-02
自己寫了個JS+CSS的小東西，用來看提升用戶體驗的。 Name：WindowsTextShow；2008-12-12
這篇文章主要為大家詳細介紹了javascrip+HTML5 Canvas繪制轉盤抽獎的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
原生JS實現(xiàn)移動端web輪播圖詳解（結合Tween算法造輪子）
在做移動端開發(fā)的時候，必不可少的是輪播圖，下面這篇文章主要給大家介紹了關于利用純JS實現(xiàn)移動端web輪播圖的相關資料，重要的是結合Tween算法造輪子，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
這篇文章主要為大家詳細介紹了獲取陰歷（農歷）日期的js代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細介紹了js實現(xiàn)彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
發(fā)現(xiàn)為本文起一個合適的標題還不是那么容易，呵呵，所以在此先說明下本文的兩個目的2009-02-02
微信小程序里面的自帶彈窗icon只有兩種，success和loading。這篇文章主要介紹了微信小程序之自定義toast彈窗效果的實現(xiàn)代碼 ,需要的朋友可以參考下2018-11-11
JavaScript實現(xiàn)沿五角星形線擺動的小圓實例詳解
這篇文章主要介紹了JavaScript實現(xiàn)沿五角星形線擺動的小圓實例詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
ie6下png圖片背景不透明的解決辦法使用js實現(xiàn)
我們時常在使用png圖片的時候，在ie6下發(fā)生背景不透明的問題，解決的方法實在是太多了，下面給大家介紹下一個js解決的方式，感興趣的朋友可以了解下的2013-01-01