js事件代理

当我们需要对很多元素添加事件的时候，可以通过将事件添加到他们的父节点来触发处理函数。

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!");
    }   
})