js中事件处理程序的内存优化

     在web设计中，为每个按钮都添加一个onclick事件已经是一件司空见惯的事情了。但是，每个函数都是一个对象，都会占用一定的内存，内存中的对象越多，性能就越差。因此，从如何利用事件处理程序的角度出发，还是有一些方法能够提升性能的。

例如给下面这个html元素添加事件处理：

    <ul id="myLinks">
        <li id="goSomewhere">Go somewhere</li>
        <li id="doSomething">Do something</li>
        <li id="say">say hi</li>
    </ul>

      这个事件希望我们点击Go somewhere的时候跳转到一个页面去，点击Do something的时候改变窗口的title，而点击say hi的时候弹出一个对话框。 对于这样的情况，我们怎么去处理呢？也许我们可能写出出这样的代码：

    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("say"); 

    item1.addEventListener("click",function(event){
        location.href = "www.flyknows.com";
    },false);

    item2.addEventListener("click",function(event){
        document.title="hello";
    },false);

    item3.addEventListener("click",function(event){
        alert("hi");
    },false);

     如果所有可以单击的按钮都采用这样的一种方式，那么将会有数不清的代码用于添加事件处理程序，且性能非常的差。其实我们可以采用事件委托的方式来处理这个问题：

var link = document.getElementById("myLinks");
    link.addEventListener("click",function(event){
        var target = event.target;

        switch(target.id){
            case "goSomewhere":
                location.href = "www.flyknows.com";
                break;
            case "doSomething":
                document.title="hello";
                break;
            case "say":
                alert("hi");
                break;
        }

    },false);

     这段代码只对ul元素添加了一个click的事件处理，当我们点击li的时候，事件会冒泡，最终会触发这个事件。通过检测id属性从而进行相应的操作。因此我们需要绑定事件处理程序的时候，尽量可以绑定到较高层次的元素上。

     要将某个绑定了事件处理程序的元素移除时，最好先移除其事件处理程序，否则会占用内存，极有可能无法被当做垃圾回收。例如：

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