四、交互事件处理中 对内存和性能的影响

在web交互中，如果无脑的在页面上添加大量事件处理程序，事件的处理程序数量直接关系到页面的整体运行性能。原因如下：

1. 每个函数都是对象，都活占用内存；内存中的对象越多，性能就越差。
2. 必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

1. 事件委托

事件处理程序过多的解决方案就是事件委托了，它依赖于事件冒泡，只指定一个事件，对DOM元素加以判断。

<ul id="MyLinks">
 <li id="link1">去哪里呢？</li>
 <li id="link2">做什么呢？</li>
 <li id="link3">你好！！！</li>
</ul>

上面的html片段中有三个交互逻辑，事件委托就能将三个交互放在一个事件中。

var list = document.getElementById("MyLinks");
EventUtil.addHandler(list,'click',function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch(target.id){
     case "link1":
              document.title  = "改变页面title";
              break;
     case "link2":
              location.href = "xxx";
              break;
     case "link3":
              console.log("hi!!");
              break;
    }
})

2.移除事件处理程序

没当将事件处理程序制定给元素时，运行中的浏览器代码与支持页面交互的js代码之间就会简历一个连接 。这种连接越多，页面执行起来就越慢。

除了时间委托能减少事件的数量，我们还可以在事件处理程序不必要的时候移除它。

var btn = document.getElementById("mybtn");
btn.onclick = function(){
     //先执行某些操作
   btn.onclick  = null;
   document.getElementById("MyDiv").innerHTML = " processing....."
}