JS中的事件委托和移除事件处理程序

1.什么是事件委托？

对“事件处理程序过多”的问题的解决方案就是事件委托。事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到documeng层次，也就是说我们可以为整个页面指定一个onclick事件处理程序，而不必给每一个可单击的元素分别添加事件处理程序。如下代码：

//html
<ul id="myLinks">
  <li id="goSomewhere">GO Somewhere</li>
  <li id="doSomething">Do something</li>
  <li id="sayhi"> Say Hi</li>

</ul>
//js
var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3= document.getElementById("sayhi");

item1.addEventListener("click",function(){
    location.href="http://www.hao123.com";
    },false);
item2.addEventListener("click",function(){
    document.title="事件委托";
    },false);
item3.addEventListener("click",function(){
    alert("Hi");
    },false);

这是传统的方式为每个li元素添加事件处理程序，但是如果在一个复杂的web应用程序中，对所有可点击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时可以使用事件委托技术解决这个问题，只需要在DOM树种尽量高的层次上添加一个事件处理程序，如下：

var list=document.getElementById("myLinks");
list.addEventListener("click",function(event){
    switch(event.target.id){
        case "goSomewhere":
           location.href="http://www.hao123.com";
           break;

        case "doSomething":
           document.title="事件委托";
           break;

        case "sayhi":
           alert("Hi");
           break;
        }
    },false)

在这段代码中，我们使用事件委托只为ul元素添加了一个onclick事件处理程序，由于所有可单击的元素都是它的子元素，所以都会冒泡到父元素，最终被父元素上的事件处理程序解决。这种技术的好处在于占用内存更少，所耗费的时间更少。所以用到按钮的事件都可以用事件委托技术。

2.移除事件处理程序

内存中留有那些过时不用的“空事件处理程序”，是造成web应用程序内存和性能问题的主要原因。因此在不需要的时候事件处理程序，就可以移除它。
例如当代有事件处理程序的元素被innerHTML删除了，那么原来添加到元素的事件处理程序极有可能无法被当作垃圾回收。

<div id="mydiv">
<input type="button" id="mybtn" />
</div>

var btn=document.getElementById("mybtn");
btn.onclick=function(event){
    document.getElementById("mydiv").innerHTML="变化了";
    }

当按钮被移除时，他还带着一个事件处理程序呢，在div元素上设置innerHTML可以把按钮一周，但事件处理程序仍然与按钮保持引用关系。所以当你知道哪些元素被移除，最好手工移除对应事件处理程序。

var btn=document.getElementById("mybtn");
btn.onclick=function(event){

    btn.onclick=null;
    document.getElementById("mydiv").innerHTML="变化了";
    }

在此我们在设置innerHTML属性之前，先移除按钮的事件处理程序。这样就确保内存可以被再次利用。