原生JS 事件委托的问题

Question

<ul>
      <li><img src="img/remind.png" alt=""></li>
      <li><img src="img/remind.png" alt=""></li>
      <li><img src="img/remind.png" alt=""></li>
  </ul>

我点击事件绑定在ul，想委托到li，然后通过e.target的tagName是否是LI来判断，问题就是li里面还包含有其他元素,例如我的li里有一张图，点击的时候它的e.target是img，所以事件不会执行，怎么样才能把事件准确委托到li上，img只是一个例子，或者li会有更复杂的结构，这时候应该怎么躲开li里面的子元素进行委托呢？
我以前用的一个笨办法是，给li一个全覆盖的伪元素，但我觉得这样不太好

Answer 1

思路：
1、给要绑定的li添加class(news-item),ul添加class（news）
2、通过target判断class中是否包含news-item，如果不包含，通过target查找父级，以此类推，直到查找到li.news-item或者ul.news停止
3、如果没有找到li.news-item则不执行事件

Answer 2

肯定要判断的。

document.querySelector('ul').addEventListener('click', function(e) {
    console.log(e)
    if (e.target.nodeName === 'LI') {

    } else if (e.target.nodeName === 'IMG')
})

Answer 3

从你这张图的结构来说，用match匹配点击的元素

document.querySelector('ul').addEventListener('click', ({ target }) => {
  if (target.matches('ul li')) {
    console.log('click li')
  }
});

Answer 4

e.path.find 考虑一下?
可能需要浏览器兼容,没有研究过.