事件委托及移除事件处理程序

        在JavaScript中，添加到页面的事件处理程序数量直接关系到页面的整体运行性能，主要原因为：首先，每个函数都是对象，都会占用内存，内存中的对象越多，性能就越差。其次必须事先指定所有时间处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

1.事件委托

        对“事件处理程序过多”的解决方案就是事件委托。事件委托利用了事件的冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。优点如下：
        ·  document对象很快就可访问，可以在页面生命周期的任何时间点上为他添加事件处理程序（无需dengdai DOMContentLoaded或load事件）。
        ·  在页面设置事件处理程序所花的事件更少，只添加一个事件处理程序所需的DOM引用更少，所花的事件也更少。
        ·  整个页面站用的内存空间更少，能够提升整体性能。

<!-- html代码 -->
<ul id = "someone"> 
     <li id = "name"> name </li>
     <li id = "age"> age </li>
     <li id = "address"> address </li>
</ul>

//js代码
var person = document.getElementById("someone");
person.addEventListenter("click",function(event){

    switch(event.target.id){
        case "name":
            document.title = '''title changed';
            break;
        case "age":
            location.href = "http://www.yxl.com";
            break;
        case "address":
            alert("address");
            break;
    }
};

2.移除事件处理程序

        在不需要的时候移除事件处理程序，也是解决上述问题的一个方案。内存中那些过时不用的“空事件处理程序”(dangling event handler)也是造成Web用用程序内存性能问题的主要原因。导致空事件处理程序两种情况：

第一种：从文档中移除带有事件处理程序的元素时。

<div id = "myDiv">
    <input type = "button" value = "Click me" id = "myBtn">
</div>

<script type = "text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        //do something
        btn.onclick = null;  //移除事假能处理程序
        document.getElementById("myDiv").innerHTML = "processing...";
    }

在事件处理程序中删除按钮也能阻止事件冒泡，目标元素在文档中是事件冒泡的前提。

第二种：页面卸载的时候

页面被卸载之前没有清理干净事件处理程序，那他们就会滞留在内存中，一般来说，岁好的做法是在页面卸载之前，先通过unload时间处理程序移除所有事件的处理程序。