JavaScript的事件代理和委托

如果这个UL中的Li子元素会频繁地添加或者删除，我们就需要在每次添加Li的时候都调用这个addListeners4Li方法来为每个Li节点添加事件处理函数。这就添加的复杂度和出错的可能性。

更简单的方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象(target)来判断并获取事件源Li。下面的代码可以完成我们想要的效果：

// 获取父节点，并为它添加一个click事件 
document.getElementById("parent-list").addEventListener("click",function(e) { 
  // 检查事件源e.targe是否为Li 
  if(e.target && e.target.nodeName.toUpperCase == "LI") { 
    // 真正的处理过程在这里 
    console.log("List item ",e.target.id.replace("post-")," was clicked!"); 
  } 
});  

为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。从而可以获取到相应的信息，并作处理。