当一个页面中需要给比较多的元素添加时间处理程序的时候，以前的做法是通过找到每个元素，然后逐一的去添加。这样做有一些缺点：
多次去dom树中查找元素，比较耗费时间。
太多事件处理程序，比较占资源。特别个别浏览器(如ie)对垃圾回收这块又做的不够好。
程序中过多的事件处理，代码后期不好管理。
这时我们可以用一种叫做事件委托的方式去解决。
事件委托的原理：
假设现在要处理多个具有并列关系元素的click事件，当我点击这些元素中的任何一个元素，则事件一定会通过冒泡的方式，冒泡到他的上层的父节点元素然后一直冒到window，
所以这个时候我们就可以在他的上层元素中添加事件处理程序，来统一处理这些事件，在处理的过程中可以通过获取target的id来知道是点击的哪个具体的元素。
这种方式就称之为事件委托。
<body>
<ul id="myGirls">
<li id="zhiling">志玲</li>
<li id="baizhi">柏芝</li>
<li id="fengjie">凤姐</li>
<li id="yifei">亦非</li>
</ul>
<script type="text/javascript">
var myGirls = document.getElementById("myGirls");
myGirls.addEventListener("click", function(event) {
var tagetId = event.target.id;
// alert(tagetId);
switch (tagetId) {
case "zhiling":
alert("我是志玲，哥哥你要干吗");
break;
case "baizhi":
alert("我是柏芝，我以后再也不找冠希了");
break;
case "fengjie":
alert("我是凤姐，我已经整容了，没有以前那么丑了");
break;
case "yifei":
alert("我是亦非，我干爹是富豪");
break;
default:
alert("你一个都不点是啥意思");
break;
}
}, false);
</script>
</body>
说明:
完全可以考虑给
document添加一个事件处理程序，用来处理页面上发生的某种特定类型的事件。比较适合事件委托的事件：
click 、 mousedown 、 mouseup 、 keydown 、 keyup 和 keypress。