标签：
事件代理是利用了事件冒泡，制定一个事件处理程序，就可以管理某一类的所有事件。例如，click事件会一直冒泡到document层次（就是不断地向父元素传递至最上层的document）。就是说可以为整个页面指定一个onclick事件处理程序，而不必单个元素分别添加处理程序。
<ul id="ul1">
<li >item1</li>
<li >item2</li>
<li >item3</li>
</ul>
不过，在没有接触事件代理的时候，我觉得我和大部分人一样都只会使用单个绑定：
window.onload= function () {
var ul=document.getElementById("ul1");
var aLi=ul.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].onclick= function () {
alert(this.innerHTML);
}
}
}
根据上面的描述，事件代理是利用的事件冒泡，会一直向上传递，因此我们可以使用事件代理，只需在DOM树尽量高的层次上添加事件处理程序。
window.onload= function () {
var ul=document.getElementById("ul1");
ul.onclick= function (event) {
var e=event||window.event;
var event= e.target || e.srcElement;
switch (event.id){
case "item1":
alert("item1");
break;
case "item2":
alert("item2");
break;
case "item3":
alert("item3");
break;
}
}
}
这段代码里，只为ul添加了onclick事件，所以的列表项都是这个元素的子节点，事件又会冒泡，所以单击事件最终会被这个函数处理。与前面未使用事件代理的代码比较，这段消耗更少。只取了一个DOM元素，只添加了一个时间，结果是一样的。
可以在页面上添加一个事件处理程序，处理某种特定的事件，这样与传统的做法有以下好处：
标签：
原文地址：http://www.cnblogs.com/sisiliu/p/5625158.html
