事件委托

事件处理可以为web提供交互能力，但是，在javascript中事件处理程序的数量将直接关系到页面的整体运行性能。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就会越差。其次，必须事先指定所有事件处理程序而导致DOM的访问次数增多，会延长整个页面交互就绪的时间。
 对事件处理程序过多问题解决的方案就是 事件委托，事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如：click事件会一直冒泡到document层次，也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必为每个可单击的元素添加事件处理程序。

 <ul id="myUl">
  <li id="li_1">Hello</li>
  <li id="li_2">World</li>
</ul>

利用事件委托添加点击事件，只需在DOM树中尽量最高层次添加一个事件处理程序：

var myUl=document.getElementById("myUl");

myUl.οnclick=function(event){
  event=event||window.event;    //兼容IE
  target=event.target||event.srcElement;  //兼容IE

  switch(target.id){
      case "li_1" :
            alert("click li_1");
            break;
      case "li_2":
              alert("click li_2");
              break;
  }
}

事件委托的优点：

  1.document对象可以很快访问到，而且可以在页面生命周期的任何时点为它添加事件处理程序，（无需等待DOMContentLoaded或load事件）。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。

  2.在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需要的DOM引用更少，所花的时间更少。

  3. 整个页面占用的内存空间更少，能够提升整体性能。