Javascript事件委派，处理单击的元素的父级

Question

http://jsfiddle.net/walkerneo/QqkkA/

我在这里看到了许多关于javascript中的事件委派的问题，或者被回答，但我还没有看到如何对不会成为点击事件目标的元素使用事件委派。

例如：

HTML:

<ul>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
</ul>​

CSS：

ul{
    padding:20px;
}
li{
    margin-left:30px;
    margin-bottom:10px;
    border:1px solid black;
}
.d{
    padding:10px;
    background:gray;
}
​

如果我想在单击li元素时添加一个单击事件来处理它们，该怎么办？如果将事件处理程序附加到ul元素，则div将始终是目标元素。除了在点击函数中检查目标元素的每一个父元素外，我如何才能做到这一点？

编辑：

我想使用事件委派而不是：

var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    lis[i].onclick = function(){};
}

但如果我这样做：

document.getElementsByTagName('ul')[0].addEventListener('click',function(e){
    // e.target is going to be the div, not the li
    if(e.target.tagName=='LI'){
    } 
},false);

编辑：我对如何使用Javascript库不感兴趣，我感兴趣的是它们是如何做到这一点的，以及如何使用纯js。

Answer 1

这里有一种解决方法：

var list = document.getElementsByTagName('ul')[0]
list.addEventListener('click', function(e){
  var el = e.target
  // walk up the tree until we find a LI item
  while (el && el.tagName !== 'LI') {
     el = el.parentNode
  }
  console.log('item clicked', el)
}, false)

这被过度简化了，循环将继续沿着树向上，甚至经过UL元素。有关更完整的示例，请参阅rye/events中的实现。

Element.matches、Node.contains和Node.compareDocumentPosition方法可以帮助您实现这类功能。

Answer 2

现在有一个名为closest的元素方法，它正是这样做的。它以CSS选择器作为参数，并找到最匹配的祖先，也就是元素本身。所有当前版本的桌面浏览器都支持它，但总的来说，它还没有准备好用于生产。上面链接的MDN页面包含一个polyfill。