Javascript事件委托,处理被点击元素的父母？

Question

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

我在这里看到很多问题要么在javascript中询问或回答事件委托,但是我还没有看到如何将事件委托用于不会成为click事件目标的元素.

例如:

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元素,则divs将始终是目标元素.除了在单击函数中检查目标元素的每个父元素之外,我该如何实现？

编辑:

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

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元素.有关更完整的示例,请参阅黑麦/事件中的实现.

的Element.matches,Node.contains和Node.compareDocumentPosition方法,可以帮助你实现这种类型的特征.

Answer 2

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