事件委托

事件委托
对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个时间处理程序，就可以管理某一类型的所有事件。
一下面的HTML代码为例：

<ul id="mylinks">
   <li id="goSomething">Go something</li>
   <li id="doSomething">Do something</li>
   <li id="sayHi">Say Hi</li>
</ul>

其中包含三个被单击后会执行的列表项。按照传统的做法，需要向下面这样为他们添加3个事件处理程序。

  var item1=document.getElementById("gosomething");
  var item2=document.getElementById("dosomething");
  var item3=document.getElementById("sayHi");
  
  EventUtil.addhandler(item1,"click",function(){
      location.href="http://www.wrox.com";
  });
  EventUtil.addhandler(item2,"click",function(){
      document.title="I changed the document's title"
  });
  EventUtil.addhandler(item3,"click",function(){
      alert("hi");
  });

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

var list=document.getElementById("mylinks");
EventUtil.addhandler(list,"click",function(event){
    event=EventUtil.getEvent(event);
    var target=EventUitl.getTarget(event);
    switch(target.id){
        case "doSomething":
            document.title="I change the document's title";
            break;
        case "goSomewhere":
            location.href="http://www.wrox.com";
            break;
        case "sayHi":
            alert("sayHi");
            break;
    }
})

在这段代码里，我们使用事件委托只为ul元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且它们的事件会冒泡，所以事件最终会被这个函数处理。具体关于target等解释，请参考
http://www.cnblogs.com/qqqiangqiang/p/4916848.html