腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

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

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

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

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

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

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

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

二、事件委托

對(duì)“事件處理程序過(guò)多”問(wèn)題的解決方案就是事件委托。

事件委托利用了事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。例如：click事件會(huì)一直冒泡到document層次。也就是說(shuō)，我們可以為整個(gè)頁(yè)面指定一個(gè)onclick事件處理程序，而不必給每個(gè)可單擊的元素分別添加事件處理程序。

事件委托方法：

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)點(diǎn)：

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

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

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

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

您可能感興趣的文章: