在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......";