我们经常遇到vue中v-for一个列表，列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们我们如何用委托的形式来实现呢。
列表
//html
<table @click="edit">
<tr v-for="item in list">
<td>{{item.name}}</td>
...
<td>
<button :data-id="item.id" title="eidt">编辑</button>
</td>
</tr>
</table>
//js
edit (event){
if(event.target.title == "edit"){ //如果点击到了edit
let id = evenr.target.dataset.id;
//拿着id参数执行着相关的操作
}
}
注意： 因为target是鼠标点击的直接元素哦，所以委托者最好不要有很多子元素。
我们经常遇到vue中v-for一个列表，列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听，从性能...
项目中遇到大量的button需要添加同一个@click事件，如果给每一个button都添加@click事件，这么多...
大量的事件处理函数会影响性能: 事件处理函数本质上是一种函数,是一种对象,存放在内存中,设置大量的事件处理函数会使...
前言 从疯狂的操纵dom转到vue这样通过数据驱动的程序员来说，姿势的转换也自然产生了很多疑问。比如，事件委托。包...
------------------事件委托----------------- 事件: 事件委托: 原理: 冒泡 ...
*说到事件委托，我们首先先要知道什么是事件委托—— · 那么什么是事件委托呢？？？ JS里的事件委托就是当事件...
什么是事件委托？为什么要用事件委托？ 什么是事件委托？ 事件委托，又称事件代理，就是将元素的事件处理交由父元素或者...
1、事件委托： 2、事件委托的优势：
JavaScript(jQuery)中的事件委托 一：什么是事件委托？ 事件委托是利用事件冒泡，只指定一个事件...
事件委托原理：事件冒泡机制。 什么是事件委托： 事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪...
本文标题：Vue巧用事件委托
本文链接：https://www.haomeiwen.com/subject/tyjstxtx.html
网友评论