当我们需要对很多元素添加事件的时候，可以通过将事件添加到他们的父节点来触发处理函数。
example：
<ul id="p-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
我们给每个li标签添加点击事件，如果遍历一遍li标签，逐个添加点击事件，比较消耗性能（因为我们要寻找dom）。
function addListeners(liNode){
liNode.onclick = function clickHandler(){...};
liNode.onmouseover = function mouseOverHandler(){...}
}
window.onload = function(){
var ulNode = document.getElementById("p-list");
var liNodes = ulNode.getElementByTagName("Li");
for(var i = 0, l = liNodes.length; i < l; i++){
addListeners(liNodes[i]);
}
}
如果li元素频繁的添加或者删除，我们需要在每次添加li元素的时候调用addListeners函数，明显较复杂。
来点简单的：当事件抛到上级父元素时，我们通过检查事件的目标对象（target）来判断并截取事件源li
document.getElementById('p-list').addEventListener('click',function (e) {
if (e.target.nodeName.toUpperCase() == 'LI') {
console.log("List item ",e.target.id.replace("post-",'')," was clicked!");
}
})
