本文實例分析了javascript性能優化之事件委托。分享給大家供大家參考，具體如下：
為下面每個LI綁定一個click事件
<ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Say hi</li></ul>
一、傳統寫法
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程序設計有所幫助。
新聞熱點
疑難解答
