事件委托的特殊用法
問題回顧
當我們想給一個清單中的每個清單項添加相同的事件時，我相信最先想到的方法一定是事件委托，通過将事件監聽器設定在其父節點上，利用事件冒泡的原理實作想要的操作，這樣隻進行了一次的
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
方法選擇出我們所要的清單項節點。
高數好難? ，隻想學前端?，加油吧！