本文實例分析了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)系到頁面的整體運行性能，事件越多，性能越差。
導致原因是多方面：
1、每個函數(shù)都是對象，都會占用內(nèi)存；內(nèi)存中的對象越多，性能就越差。
2、必須事先指定所有事件處理程序而導致的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)在頁面上，就可以立即具備適當?shù)墓δ堋?/p>
2）在頁面中設置事件處理程序所需的時間更少。只添加一個事件處理程序所需的Dom引用更少，所花的時間也更少。
3）整個頁面占用的內(nèi)存空間更少，能夠提升整體性能。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
