javascript性能優(yōu)化之事件委托實例詳解

更新時間：2015年12月12日 16:00:41 作者：挨踢前端

這篇文章主要介紹了javascript性能優(yōu)化之事件委托用法,結(jié)合實例形式對比分析了JavaScript中事件委托的具體用法與優(yōu)點,需要的朋友可以參考下

本文實例分析了javascript性能優(yōu)化之事件委托。分享給大家供大家參考，具體如下：

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

<ul id="myLinks">
  <li id="goSomewhere" >Go somewhere</li>
  <li id="doSomething" >Do something</li>
  <li id="sayHi" >Say hi</li>
</ul>

一、傳統(tǒng)寫法

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中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能，事件越多，性能越差。

導(dǎo)致原因是多方面：

1、每個函數(shù)都是對象，都會占用內(nèi)存；內(nèi)存中的對象越多，性能就越差。
2、必須事先指定所有事件處理程序而導(dǎo)致的DOM訪問次數(shù)，會延遲整個頁面的交互就緒時間。

二、事件委托

對“事件處理程序過多”問題的解決方案就是事件委托。

事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如：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; 
  }
}

三、使用事件委托的優(yōu)點：

1）document對象很快就可以訪問，而且可以在頁面生命周期的任何時間點上為它添加事件處理程序(無需等待DOMContentLoaded或load事件)。換句話說，只要可單擊的元素呈現(xiàn)在頁面上，就可以立即具備適當(dāng)?shù)墓δ堋?/p>

2）在頁面中設(shè)置事件處理程序所需的時間更少。只添加一個事件處理程序所需的Dom引用更少，所花的時間也更少。

3）整個頁面占用的內(nèi)存空間更少，能夠提升整體性能。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: