1.为什么要用到事件委托
在我们的工作中我们经常会遇到一个ul下的多个li都需要添加点击事件,如果我们给每一个li都加上一个回调事件的话会影响性能,而事件委派即把子节点的触发事件都委托给父节点。这样只需要一个回调函数就可以解决。
<ul @click='clickBtn'>
<li :data-Selectid="Selectid" @mouseover="intoBtn(index)" v-for="(i,index) in 20" :key="index">...让我变化吧</li>
</ul>
import {throttle} from 'lodash'
//函数的节流
intoBtn: throttle(function (index){
console.log(index,'index');
this.currentIndex = index
},500),
//事件的代理
clickBtn(e) {
let element = e.target;
let {selectid}=element.dataset
// console.log(selectid,'Selectid');
// console.log(e.target, 'e');
if(selectid==0){
// console.log(e.target.innerText, );
e.target.innerText='...我是你真正想要点击的元素'
}
}