标签：
1 <ul id="parent-list"> 2 <li id="post-1">Item 1</li> 3 <li id="post-2">Item 2</li> 4 <li id="post-3">Item 3</li> 5 <li id="post-4">Item 4</li> 6 <li id="post-5">Item 5</li> 7 <li id="post-6">Item 6</li> 8 </ul>
当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都添加一些类似onMouseOver或者onClick之类的事件监听。
1 function addListeners4Li(liNode){ 2 liNode.onclick = function clickHandler(){...}; 3 liNode.onmouseover = function mouseOverHandler(){...} 4 } 5 6 window.onload = function(){ 7 var ulNode = document.getElementById("parent-list"); 8 var liNodes = ulNode.getElementByTagName("Li"); 9 for(var i=0, l = liNodes.length; i < l; i++){ 10 addListeners4Li(liNodes[i]); 11 } 12 }
如果这个UL中的Li子元素会频繁地添加或者删除，我们就需要在每次添加Li的时候都调用这个addListeners4Li方法来为每个Li节点添加事件处理函数。这就添加的复杂度和出错的可能性。
更简单的方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。下面的代码可以完成我们想要的效果
1 //事件代理 2 var ulNode=document.getElementById(‘parent-list‘);//父亲节点对象 3 ulNode.addEventListener(‘click‘, function(event){ //event事件对象 4 var target=event.target || event.srcElement; //事件目标 5 if (!!target && target.nodeName.toUpperCase()===‘LI‘) { 6 // statement 7 console.log(‘target‘+target+target.innerHTML); 8 } 9 });//默认为事件冒泡，布尔值false
为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。
从而可以获取到相应的信息，并作处理。
文章来源： http://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html
标签：
原文地址：http://www.cnblogs.com/zjf-1992/p/5389438.html
