事件委托

85 阅读1分钟

1.为什么要用到事件委托

在我们的工作中我们经常会遇到一个ul下的多个li都需要添加点击事件,如果我们给每一个li都加上一个回调事件的话会影响性能,而事件委派即把子节点的触发事件都委托给父节点。这样只需要一个回调函数就可以解决。

image.png

<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='...我是你真正想要点击的元素'
      }
    }

image.png