Javascript 事件委托(delegate)，处理点击元素的 parent ？

Question

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

我在这里看到了很多关于在 javascript 中使用事件委托(delegate)询问或回答的问题，但是我还没有看到如何对不会成为目标的元素使用事件委托(delegate)点击事件。

例如:

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 将始终是目标元素。除了在点击函数中检查目标元素的每个父元素之外，我该如何完成此操作？

编辑:

我想使用事件委托(delegate)而不是:

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方法可以帮助您实现此类功能。