精华内容
下载资源
问答
  • VUE中的事件委托

    2021-06-02 09:05:51
    我们事件委托一般都是使用在列表里面的。这里就拿列表举例: 1.我们在每一个循环的标签身上动态绑定一个自定义属性。 2.给统一的父元素绑定事件。 3.在事件中可以通过事件对象来获取自定义属性的值 代码展示 <

    什么是事件委托?

    事件委托,又名事件代理。事件委托就是利用事件冒泡,把子元素的事件绑定到父元素上。如果子元素阻止了事件冒泡,那么委托就没法实现了。

    好处:
    提高性能,减少了事件绑定,从而减少内存占用。

    (事件冒泡就是由内往外,从具体的目标节点元素触发,逐渐向上传递,直到根节点。)

    怎么使用事件委托

    我们事件委托一般都是使用在列表里面的。这里就拿列表举例:
    1.我们在每一个循环的标签身上动态绑定一个自定义属性。
    2.给统一的父元素绑定事件。
    3.在事件中可以通过事件对象来获取自定义属性的值

    代码展示

    <template>
      <div class="home">
          <ul @click="click">
            <li v-for="(item,index) in 100" :key="item" v-bind:data-index="index">{{item}}</li>
            <-- data-自定义属性名="值" -->
          </ul>
      </div>
    </template>
    
    <script>
    
    
    export default {
      methods:{
        click(e){
          console.log(e.target.dataset.index);
          // 获取是通过  e.target.dataset.自定义属性名
          
        }
      },
    }
    </script>
    
    

    注意:如果事件需要传参且还需要用到事件对象,那么我们传入的第一个实参就是事件对象。事件对象使用 $event 来传入。

    展开全文
  • vue事件委托

    2021-05-30 15:59:30
    我们事件委托一般都是使用在列表里面的。这里就拿列表举例: 我们在每一个循环的标签身上动态绑定一个自定义属性。 给统一的父元素绑定事件。 在事件中可以通过事件对象来获取自定义属性的值 代码 <template>...

    什么是事件委托

    事件委托是把子元素的事件委托给父元素去处理。

    好处:
    1、减少事件注册

    怎么使用事件委托

    我们事件委托一般都是使用在列表里面的。这里就拿列表举例:

    1. 我们在每一个循环的标签身上动态绑定一个自定义属性。
    2. 给统一的父元素绑定事件。
    3. 在事件中可以通过事件对象来获取自定义属性的值
      代码
    <template>
      <div class="home">
          <ul @click="click">
            <li v-for="(item,index) in 100" :key="item" v-bind:data-index="index">{{item}}</li>
            <-- data-自定义属性名="值" -->
          </ul>
      </div>
    </template>
    
    <script>
    
    
    export default {
      methods:{
        click(e){
          console.log(e.target.dataset.index);
          // 获取是通过  e.target.dataset.自定义属性名
          
        }
      },
    }
    </script>
    

    注意1:如果事件需要传参且还需要用到事件对象,那么我们传入的第一个实参就是事件对象。事件对象使用 $event 来传入
    注意2:事件委托是利用事件冒泡的原理,所以如果组元素阻止事件冒泡,事件委托将会失效。

    展开全文
  • vue 事件委托

    2020-11-30 17:56:38
    Vue 添加事件的方式很方便,在标签元素上以@click=“fnName” 的形式填加就好,而且还有 .stop 、.prevent 、.self 等修饰符,简单好用。 但是如果li非常多呢?给列表上每个li都添加点击事件是不是不太好? li 添加...

    Vue 添加事件的方式很方便,在标签元素上以@click=“itemFn” 的形式填加就好,而且还有 .stop.prevent.self 等修饰符,简单好用。

    但是如果li非常多呢?给列表上每个li都添加点击事件是不是不太好?

    li 添加click

    <template>
    	<ul>
          <li class="li" v-for="(m,i) in 5" :key="i" @click="itemFn(m)">{{m}}</li>
        </ul>
    </template>
    
    <script>
    	export default {
    		methods:{
    			itemFn (res) {
    				//点击每个li,打印 1 、2 、3 、4、5
    				
    				console.log(res) 	}
    			}
    		}
    	}
    </script>
    

    事件委托 ul 添加click

    <template>
    	<ul @click="clickUlFn">
          <li class="li" v-for="(m,i) in 5" :key="i" :data-index="i">{{m}}</li>
        </ul>
    </template>
    
    <script>
    	export default {
    		methods:{
    			clickUlFn (e) {
    				if(e.target.nodeName =='LI'){
    					//0、1、2、3、4  下标
    					console.log(e.target.dataset.index) 
    				}
    			}
    		}
    	}
    </script>
    

    注意 nodeName

    需要注意比对一下nodeName,是否点击的是 li
    在这里插入图片描述

    事件委托的坑

    //将点击事件添加到UI上,确实减少了事件的注册,但是li里通常还有其他子元素,
    //当你实际获取e.target.nodeName 时,也大概率不是li ,因此我一般会将一个子元素定位到li上面
    // z-index 调大,且透明
    

    如果还有更好的办法,欢迎评论留言~

    展开全文
  • Vue事件委托

    千次阅读 2019-04-23 09:47:56
    我们知道:过多的事件对于性能来说是很糟糕的,尤其在移动端,可以说是无法容忍。 结构: <ul @click="handleClick"> <li v-for="(item, index) in data" :data-index="index"> {{ item.text }...

    要求是:点击tbody中td携带所在行的参数跳转。
    我们知道:过多的事件对于性能来说是很糟糕的,尤其在移动端,可以说是无法容忍。
    结构:

      <ul @click="handleClick">
              <li v-for="(item, index) in data" :data-index="index">
                {{ item.text }}
              </li>
      </ul>
     或者:
      <tr v-for="(item, index) in tbodyArr" :key="index" @click="linkToDataInput(item)">
            <td>{{ ((index+1)+((currentPage-1)*10)) }}</td>
            <td>{{ item.branchname }}</td>
            <td>{{ item.status }}</td>
            <td>{{ item.updatetime }}</td>
      </tr>
      在methods:{
      			linkToDataInput(item) {
    			        this.$router.push({
    			          path: '/datainputprogress',
    			          query: {
    			            ordercode: item.ordercode,
    			            shopname: item.shopname,
    			            branchname: item.branchname,
    			            mectypeflag: item.mectypeflag
    			          }
    			        })
    			      },
      }
    
    展开全文
  • vue事件委托实现

    2018-05-07 02:04:14
    说明:(1)注册一个事件到ul上,在利用e.target寻找到点击的目标,(2):data-index绑定了渲染数据列表的索引,(3)在example函数中获取到了e.target,(4)利用getAttribute获取我们前面绑定的data-index的索引注...
  • vue中实现事件委托

    千次阅读 2018-09-21 10:51:54
    在父元素上绑定点击事件 &lt;div class="panel" @click="rowClick1($event)"&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&...
  • Vue中的事件委托

    2021-06-24 20:15:05
    在项目中我们常常会用到ul和li对该标签做一些...使用事件委托就可以解决这个弊端,不多废话,直接上代码: // html <ul @click="getChildLi($event)"> <li>111</li> <li>222</li>
  • vue 中怎么用事件委托

    千次阅读 2020-06-30 11:00:33
    哈喽,大家好,今天我要介绍一下vue中怎么使用事件委托吧!那说到事件委托,那什么是事件委托呢? 大佬就此略过吧,不懂得可以随便阅读一下. 事件委托概念: 那什么叫事件委托呢?事件委托也叫事件代理,JavaScript高级程序...
  • 原理:事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理这一类型的所有事件。 应用场景:我有一个ul标签,下面有很多li标签,每个li标签都需要添加事件,难道我们要获取每个li然后在添加事件吗? 这样太...
  • vue中的事件委托

    2020-09-28 14:35:37
    <el-dropdown :hide-on-click="true" trigger="click" @command="handleCommand"> <span class="el-dropdown-link"> <div class="head_pic" @click="quitLoginCilck()"><...
  • 今天小编就为大家分享一篇对vue中的事件穿透与禁止穿透实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue事件委托优化

    2020-02-16 12:37:56
    虽然Vue不提倡也很少需要手动生成DOM,但是有时难免需要手动生成新的标签,此时,手动生成的新标签也像原生JS操作DOM一样,不会绑定事件,如以下例子: <!... <...Vue事件委托</title> ...
  • 那么vue 循环中绑定事件是否需要事件委托?。 通过打印出下面简单实例编译出来的render函数 <div id="demo"> <a v-for="item in [1,2]" @click="clickFn">1</a> </div> 我们得到下面的...
  • vue事件委托

    千次阅读 2019-07-12 10:48:35
    vue事件委托vue中完成事件委托是非常方便的 例如下面想要点击li标签输入每个li标签的数值 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> &...
  • ul> <li v-for="(item, index) in data" @click="handleClick(index)"> Click Me <...我们都知道,过多的事件对于性能来说是很糟糕的,尤其在移动端,可以说是无法容忍。为了更好...
  • Vue --事件委托

    2019-07-01 11:24:30
    前端代码 简述: ... let id = evenr.target.dataset.id ;...//拿着id参数执行着相关的操作 ...利用target获取相关参数传递给一个方法进行执行 ...通过在li元素中额外加一个data-index就可以实现委托啦~
  • 事件委托vue上的实现

    千次阅读 2019-01-09 23:35:34
    比如在vue里面,我发现大家总不爱用事件委托事件委托是为了较少dom操作的内存占用,优化性能提出的一种方法。它通过在父元素上绑定事件,依靠冒泡捕获子元素触发的事件,进而处理。 它有以下的特点: 1、基于...
  • 使用事件委托和获取vue自定义属性完成下拉框选择数据 <ul @click.stop="handleClick"> <li v-for="item in list" :key='id' :data-index="item">{{item}}</li> </ul> methods:{ ...
  • 事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡。 和许多Web技 术一样,在它们成为标准之前,Netscape和...默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Fir...
  • Vue列表 — 事件委托

    2017-10-24 19:16:42
    前言 作为疯狂的操纵dom转到vue这样通过数据...比如,事件委托。包括我看现在公司的前端代码,发现所有列表的绑定形式都是: <ul> <li v-for="(item, index) in data" @click="handleClick(index)"> ...
  • 大量的事件处理函数会影响性能: 事件处理函数本质上是一种函数,是一种对象,存放在内存中,设置大量...Vue中如何实现事件委托呢? 使用场景:后台管理项目中常见的列表项有一列操作按钮,我们通常是v-for列表渲染按钮并且
  • vue事件委托实现点击切换

    千次阅读 2018-07-20 16:44:34
    ... //事件委托实现点击切换 // $(this).$(e.target).css('color','red') } } } .left li{width: 100%;} .allWrap{display: flex} .allWrap .left{flex: 1} .allWrap .right{flex: 3}
  • 高性能 javaScript 之事件委托(Vue版)

    千次阅读 2017-10-14 16:34:43
    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。 2、DOM 事件流:冒泡事件流、捕获事件流。 3、DOM 事件模型:捕获、目标、冒泡。那什么是事件委托呢?事件委托:即是,一个事件本来是要绑定到...
  • 事件委托的原理 事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,059
精华内容 2,023
关键字:

vue使用事件委托

vue 订阅