JavaScript 事件對記憶體和效能的影響
分析:
事件處理程式本質上是一種函式,是一種物件,存放在記憶體中,設定大量的事件處理程式會使記憶體中的物件變多,Web
程式的效能會變得越來越差,使用者體驗很不好。
為了更好地利用好事件處理程式,便出現了事件委託,用來提升效能。
事件委託
事件委託(event delegation):把若干個子節點上的相同事件的處理函式繫結到它的父節點上去,在父節點上統一處理從子節點冒泡上來的事件,這種技術就叫做事件委託。
補充一下:事件委託並不侷限於父節點與子節點之間。
即可以這樣玩,比如頁面文件中有好多個處在不同位置地 button,都是繫結 click 事件,使用事件委託,我們可以把這些個事件統一繫結到 body 元素,然後再進行處理(雖然一般很少這麼用)。
下面舉例子逐步說明事件委託的優勢:
<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>
現在有一個需求:就是無論單擊上面的列表(ul)的哪個子列表(li),都會彈出一個框,來顯示我們點選了哪個子列表。
現在有兩種方法放在你眼前:
1. 為每個 li 子元素繫結 click 事件,然後設定處理函式;
2. 利用事件委託,為 ul 父元素繫結 click 事件,然後設定處理函式
// 方法一
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);<span style="display: none"> </span>
我這裡寫幾點方法二的優點:
1. 減少了訪問 DOM 的次數,提升了效能;
2. 將子元素的事件處理程式統一繫結到其父元素,減少了對記憶體的佔用;
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 程式碼之間就會建立一個連線。這種連線越多,頁面執行就越慢。前面所說的事件委託就是用來限制建立的連線數量。
就是記憶體中那些使用完後不再使用的事件處理程式,如果不釋放掉,也會影響 Web 應用程式的記憶體和效能。
<button id="button">提交</button>
var button = document.getElementById("button");
button.onclick = function(){
// 提交某個表單的操作程式碼
button.onclick = null; // 移除事件處理程式
event.target.firstChild.nodeValue = "提交中。。。";
};
總的原則就是:移除掉那些過時不再使用的事件處理程式,釋放記憶體!