原文链接：http://www.cnblogs.com/yangkangkang/p/5630295.html
先通过一个例子来引出事件委托：
假设有一个ul父节点，包含了很多li的子节点，点击li触发相应的事件
我们通常的写法是为每一个li都添加一个onclick事件监听。
<body>
<ul id="parent">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var parent = document.getElementById('parent');
var children = parent.getElementsByTagName('li');
for(var i=0,len=children.length; i<len;i++){
children[i].onclick = function(){
alert(this.innerHTML);
}
}
}
</script>
</body>
如果这个ul的子元素需允许无限态的添加时，就会出现问题：
1.新添加的元素不会绑定事件，所以需要每次添加li时同事添加绑定事件
2.绑定的事件越多，性能越差
为了解决这个问题，可以用事件代理更简单的方法是使用事件委托。
==========================================
JavaScript中事件传播过程：
事件的处理流成分为三阶段：
一、事件捕获阶段：当某个元素触发某个事件时，首先会触发根元素document，然后事件将沿着dom树向下传播给目标节点的每一个祖先节点，直到目标节点。
二、目标阶段：到达目标元素之后，执行目标元素的事件处理函数
三、事件冒泡阶段：从目标元素开时，事件将沿着DOM树向上传播，直到根节点。
下面引用一张网上的图：
那么到了正题上了，事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。
事件委托实现：
网上搜索有太多的例子，下面把刚开始的例子用事件委托的方法来实现。用事件委托的方法，动态添加的元素不需要再绑定事件了。
<ul id="parent">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
<script>
window.onload = function(){
var parent = document.getElementById('parent');
parent.addEventListener('click',function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
if(target.nodeName.toUpperCase() == 'LI'){
alert(target.innerHTML)
}
},false)
}
</script>
事件委托带来的优点：
1.不需要为每一个元素都添加监听事件而是通过委托给父元素来处理。这样就减少了内存，性能提高了
2.可以方便动态添加元素。不需要再为新添加的元素重新绑定事件。
------------------------------------------------------------------------------------------------------------------------------------