js中事件處理程序的內存優化

     在web設計中，爲每一個按鈕都添加一個onclick事件已是一件司空見慣的事情了。可是，每一個函數都是一個對象，都會佔用必定的內存，內存中的對象越多，性能就越差。所以，從如何利用事件處理程序的角度出發，仍是有一些方法可以提高性能的。

例如給下面這個html元素添加事件處理：

 

1     <ul id="myLinks">
2         <li id="goSomewhere">Go somewhere</li>
3         <li id="doSomething">Do something</li>
4         <li id="say">say hi</li>
5     </ul>

      這個事件但願咱們點擊Go somewhere的時候跳轉到一個頁面去，點擊Do something的時候改變窗口的title，而點擊say hi的時候彈出一個對話框。 對於這樣的狀況，咱們怎麼去處理呢？也許咱們可能寫出出這樣的代碼：

 1     var item1 = document.getElementById("goSomewhere");
 2     var item2 = document.getElementById("doSomething");
 3     var item3 = document.getElementById("say"); 
 4 
 5     item1.addEventListener("click",function(event){
 6         location.href = "www.flyknows.com";
 7     },false);
 8 
 9     item2.addEventListener("click",function(event){
10         document.title="hello";
11     },false);
12 
13     item3.addEventListener("click",function(event){
14         alert("hi");
15     },false);

     若是全部能夠單擊的按鈕都採用這樣的一種方式，那麼將會有數不清的代碼用於添加事件處理程序，且性能很是的差。其實咱們能夠採用事件委託的方式來處理這個問題：

 1 var link = document.getElementById("myLinks");
 2     link.addEventListener("click",function(event){
 3         var target = event.target;
 4 
 5         switch(target.id){
 6             case "goSomewhere":
 7                 location.href = "www.flyknows.com";
 8                 break;
 9             case "doSomething":
10                 document.title="hello";
11                 break;
12             case "say":
13                 alert("hi");
14                 break;
15         }
16 
17     },false);

     這段代碼只對ul元素添加了一個click的事件處理，當咱們點擊li的時候，事件會冒泡，最終會觸發這個事件。經過檢測id屬性從而進行相應的操做。所以咱們須要綁定事件處理程序的時候，儘可能能夠綁定到較高層次的元素上。

     要將某個綁定了事件處理程序的元素移除時，最好先移除其事件處理程序，不然會佔用內存，極有可能沒法被當作垃圾回收。例如：

1 btn.onclick = null;
2 document.getElementById("myDiv").innerHTML = "Processing......";