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

我在这里看到了很多关于javascript中的事件委派的问题，或者有人回答了这些问题，但是我还没有看到如何对那些不会成为click事件目标的元素使用事件委派

例如：

HTML:

如果我想添加一个click事件来处理单击时的

li

元素，该怎么办？如果我将事件处理程序附加到

ul

元素，那么

div

s将始终是目标元素。除了在单击函数中检查目标元素的每个父元素外，我还可以如何实现这一点

编辑：

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

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

---

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

这里有一种解决方法：

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元素。有关更完整的示例，请参见中的实现

---

和方法可以帮助您实现这种类型的功能。

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

实际上对你的问题感到困惑，不明白你想要实现什么。我总是在这个问题上搞砸。。。此链接可能会有所帮助：@Michal，它似乎效率低下，我想知道这是否是唯一的方法。我对jQuery进行了一些挖掘，这就是我发现的。谢谢：）这正是我需要的。太好了！这正是我需要的。谢谢

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);

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)