JavaScript 事件對記憶體和效能的影響詳情介紹

雖然說事件處理程序可以為現代 Web 頁面添加很強的交互能力，但是不分青紅皂白就添加大量的事件處理程序絕對是一種愚蠢的行為。

我們來分析一下：事件處理程序本質上是一種函數，是一種對象，存放在記憶體中，設定大量的事件處理程序會使記憶體中的對象變多，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），都會彈出一個框，來顯示我們點選了哪個子清單。

需求不難吧？有了需求，接下來是該寫js 程式碼了，現在有兩種方法放在你眼前：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);

看著上面的程式碼，我這裡寫幾點方法二的優點：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 = "提交中。。。";
};

總的原則就是：移除那些過時不再使用的事件處理程序，釋放記憶體！

 以上就是JavaScript 事件對記憶體與效能的影響詳情介紹的內容，更多相關內容請關注PHP中文網（www.php.cn）！