vue项目中使用事件委托

您所在的位置：网站首页 › vue滚动事件委托 › vue项目中使用事件委托

vue项目中使用事件委托

2023-06-24 22:42| 来源: 网络整理| 查看: 265

起因

最近项目的时候遇到一个需求，需要给一个根据数组渲染的列表的每一项绑定事件，本来准备上手直接v-for遍历然后每一项绑定事件，但是突然想到了事件委托的概念，更加高效，所以特此记录

具体需求

先将列表渲染出来，选中列表某一项，需要拿到这一项的index，获取这一项的数据以及通过更改这一项的class更改样式

事件委托代码张三 (32/35) [email protected] handleActive(e) { console.log(e.target) }

到这里就可以拿到事件源对象，但是我要的是点击的列表项的index，所以我给li元素加了data-index属性，通过元素的dataset.index获取

获取index

li中层级嵌套很深，而e.target获取的元素是最深层的那个元素，所以只要我点击的不是最外层的li，其实我还是获取不到index，这里有两个思路

给li下的每个子元素添加:data-index=index,然后可以通过e.target.dataset.index获取index，但是太麻烦，扩展性不好，略过。只给li添加:data-index=index，然后通过event的属性找到这个li，获取index；实际上event的属性出了target还有其他的挺多属性，一个path属性，是一个数组，数组项是当前元素到window各个层级的属性，可以通过这个属性获取li，代码如下 handleActive (e) { let arr = e.path.filter(item => item.nodeName === 'LI' && item.className === 'list-item') if (arr.length) { this.currentIndex = Number(arr[0].dataset.index) } },

如此就获取到index，然后就可以根据这个index获取到这个元素，以及列表项数据了

【本文地址】

vue项目中使用事件委托

vue项目中使用事件委托

今日新闻

推荐新闻