事件---内存和性能

前言

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

事件委托

1. 对”事件处理程序过多“问题的解决方案就是事件委托。

2. 事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

   var list=document.getElementById("mylist");
   EventUtil.addHandler(list,"click",function(event){
       event=EventUtil.getTarget(event);
       var target=EventUtil.getTarget(event);
       switch(target.id){
           case "li1"
               document.title="i change this document's title";
               bresk;
           case "li2"
               document.href="http://www.wrox.com";
               break;
           case "li3"
               alert("hi");
               break;
       }
   });

3. 这种技术需要占用的内存更少。
4. 可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。
5. 上述做法的优点是：
   
   • document对象很快就可以访问，所以只要元素呈现在页面上，就可以立即具备适当的功能
   • 在页面中设置事件处理程序所需的时间更少。
   • 整个页面占用的内存空间更少，能够提升整体性能。
6. 最适合采用该方法的事件包括：
   click\mousedown\mouseup\keydown\keyup\keypress

移除事件处理程序

1. 在不需要的时候移除事件处理程序
2. 内存中留有那些过时不用的 ”空事件处理程序“
3. 一种情况：从文档中移除带有事件处理程序的元素时，添加到该元素上的事件处理程序极有可能无法被当作垃圾回收。如果你知道某个元素即将被移除，那么最好手工移除事件处理程序。
4. 另一种情况：卸载页面的时候。如果在页面被卸载之前没有清理干净事件处理程序，那它们就会滞留在内存中。解决办法是：在卸载页面之前，通过onunload事件处理程序移除所有事件处理程序