事件委托

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

<ul class = "D">
<li id= "gosomewhere">Go somewhere </li>
<li id= "dosomething">Do something </li>
<li id= "say">hello world! </li>
</ul>

其中包含三个被单击的列表项，传统做法需要添加三个事件；

 var a1 = document.getElementById("A");
var a2 = document.getElementById("B");
var a3 = document.getElementById("C");
//此处eventutil省略 为封装的事件处理程序
EventUtil.addHandler(a1, "click", function (event) {
location.href =""https://www.smallclown.cn;
});
EventUtil.addHandler(a2, "click", function (event) {
document.title = "i chenged the title's title";
});
EventUtil.addHandler(a2, "click", function (event) {
console.log("hello world!");
});

利用事件委托，在需要以在DOM树中尽量最高的层次上添加一个事件处理程序，如下：

 var a4 = document.getElementById("D");
EventUtil.addHandler(a4, "click", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target:id) {
case "A" :
location.href =""https://www.smallclown.cn;
case "B" :
document.title = "i chenged the title's title";
case "C" :
console.log("hello world!");
}
}); 

更多内容下回在写，还有好多