当我们想给一个列表中的每个列表项添加相同的事件时,我相信最先想到的方法一定是事件委托,通过将事件监听器设置在其父节点上,利用事件冒泡的原理实现想要的操作,这样只进行了一次的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
方法选择出我们所要的列表项节点。
高数好难? ,只想学前端?,加油吧!