在项目中我们常常会用到ul和li对该标签做一些操作,但是因为如果把事件写在li标签上的话,就会有一下缺点:
- 无法预测未来的li标签:当我们动态插入li时,新插入的li就不存在绑定的事件。
- 增加了事件注册,浪费资源。
使用事件委托就可以解决这个弊端,不多废话,直接上代码:
// html
<ul @click="getChildLi($event)">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<div>666</div>
</ul>
// 事件
getChildLi(e){
if(e.target.localName==='li'){
alert("触发事件");
}else{
alert("非li标签,不触发事件");
}
}