javascript性能優化之事件委託實例詳解

本文實例分析了javascript性能優化之事件委託。分享給大家參考，具體如下：

為下面每個LI綁定一個click事件

Go somewhereDo somethingSay hi

一、傳統寫法

var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3=document.getElementById("sayHi");
item1.onclick = function(){
  console.log('goSomewhere');
}
item2.onclick = function(){
  console.log('doSomething');
}
item3.onclick = function(){
  alert("hello");
}

在javascript中，添加到頁面上的事件處理程序數量將直接關係到頁面的整體運行性能，事件越多，性能越差。

導致原因是多方面：

1、每個函數都是對象，都會佔用記憶體；記憶體中的物件越多，效能就越差。
2、必須事先指定所有事件處理程序而導致的DOM訪問次數，會延遲整個頁面的互動就緒時間。

二、事件委託

對「事件處理程序過多」問題的解決方案就是事件委託。

事件委託利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如：click事件會一直冒泡到document層次。也就是說，我們可以為整個頁面指定一個onclick事件處理程序，而不必為每個可點擊的元素分別新增事件處理程序。

事件委託方法：

var list=document.getElementById("myLinks");
list.onclick = function(e){
  var target = e.target;  
  switch(target.id){
   case "goSomewhere":
    console.log('goSomewhere');
    break; 
   case "doSomething":
    console.log('doSomething');
    break; 
   case "sayHi":
    alert("hello");
    break; 
  }
}

三、使用事件委託的優點：

1）document物件很快就可以訪問，而且可以在頁面生命週期的任何時間點上為它添加事件處理程序(無需等待DOMContentLoaded或load事件)。換句話說，只要可點選的元素呈現在頁面上，就可以立即具備適當的功能。

2）在頁面中設定事件處理程序所需的時間較少。只增加一個事件處理程序所需的Dom引用更少，所花的時間也更少。

3）整個頁面佔用的記憶體空間更少，能夠提升整體效能。

希望本文所述對大家JavaScript程式設計有所幫助。

【相關教學推薦】

1. JavaScript影片教學
2. JavaScript線上手冊
3. bootstrap教學