13.5 記憶體和性能
Javascript 中函式都是物件，過多被添加到事件的處理程式都會占用記憶體，記憶體中物件越多性能就越差，其次，事先指定好所有事件處理程式而導致的DOM訪問次數也會延遲整個頁面的互動就緒時間
對付“事件處理程式過多”的方案就是事件委托，事件委托利用了事件冒泡只指定一個事件處理程式就可以管理某一型別的所有事件，例如 click 時間會一直冒泡到 document 層次，可以為整個頁面指定一個 onclick 事件處理程式，而不必給每個可單擊的元素都添加上這個事件
不好的做法:
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="talk">Say hi</li>
</ul>
// 為所有元素都設定了事件處理邏輯
document.getElementId("goSomewhere").onclick = function(){
location.href = https://www.cnblogs.com/cinlap/p/"http://www.baidu.com";
};
document.getElementId("doSomething").onclick = function(){
document.title = "I changed the document's title";
};
document.getElementId("talk").onclick = function(){
alert("hi, man");
};
改良一下，只需在DOM樹盡量最高層次上添加一個事件處理程式:
var list = document.getElementById("myLinks");
list.onclick = function(event){
var target = event.target;
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = https://www.cnblogs.com/cinlap/p/"http://www.baidu.com";
break;
case "talk":
alert("hi, man");
break;
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/76022.html
標籤：JavaScript
上一篇：DOM基本認識
下一篇：IT人群體力活動行為調查問卷