问题回顾
当我们想给一个列表中的每个列表项添加相同的事件时，我相信最先想到的方法一定是事件委托，通过将事件监听器设置在其父节点上，利用事件冒泡的原理实现想要的操作，这样只进行了一次的dom操作，提高了程序的性能。通常我们都会使用事件源e.target来获取点击的元素，从而可以知道我们点击的是谁。
当我们处理的结构是像这样简单的ul > li时，这种方法就非常好用，e.target获取到的事件源就是li
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
但是当我们遇到的情况是这样的呢
需要实现的功能是，点击这个盒子区域，输出对应的li对应的id，下面是这个li对应的代码片段，很显然在li内部存在着大量的子元素，我们需要通过给li的父元素ul绑定事件，从而实现事件委托，那么我们该如何确定我们点击的元素属于哪一个li呢？下面开始正文！
<li id="mainArticleId24"> <div class="contentBox"> <div class="newsBox"> <div class="newsTime"> <ul> <li class="authorName colorBlue">ljc</li> </ul> </div> <div class="newsTitle"> <span>content</span> </div> <div class="newsBtn"> <ul class="newsUl"> <li class="false"> <i class="good">1</i> <span class="clickNum">2</span> </li> <li class="false"> <i class="worse">1</i> <span class="clickNum">2</span> </li> <li class="shareIcon"> <i class="share">3</i> </li> </ul> </div> </div> </div> </li>
抛出问题
在上面的代码中我们发现，我们通过事件源e.target不能直接的获取到我们想要的li了，从而导致我们获取不到id无从下手
解决方法
下面我通过另一种方法很好的解决了这个问题
在我们的事件对象event中，存在着一个方法path，这个方法可以返回事件触发的所有父元素，我们可以使用这个方法，完美的解决我们现在存在的问题！
我们先通过e.path获取到事件触发对象的所有的所有元素，这个方法的返回值是一个数组，我们可以通过数组中的find方法按照我们的需求选择我们想要的元素，在下面的代码中，我们先给每一个li添加一个特有的标志属性sign，通过判断e.path返回的数组中是否含有这个属性，从而来确定事件触发元素的li，进而解决了我们的问题
注意:localName属性是确定元素的标签，像div li这些就属于localName，整个方法的核心就是通过获取到触发事件元素的所有父元素集合，再通过筛选从而获得元素！
注意：每个li是位于同级的是兄弟关系，所以返回的数组中只会存在一个这样的li
let temp = e.path.find(num => { if (num.localName == 'li' && num.className == 'sign') { return num } })
总结 当我们利用事件委托给列表中的所有列表项添加事件时，在实际开发中列表项中往往会有大量的子元素，因此我们可以通过事件对象下的path方法以及数组中的find方法选择出我们所要的列表项节点。