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

    2020-10-24 14:48:13
    Vue中是否需要事件委托 事件委托有两个主要优点:一个是实用的,它使我们不必分别添加(和删除)这些侦听器。Vue已经帮我们做到了。 另一个是性能/内存。但是由于v-vor循环中的每个点击侦听器都将使用相同的回调...
    1. 事件委托:将原本需要绑定在子元素上的事件监听器委托在父元素上,让父元素充当事件监听的职务。

    优点:

    • 当新增加子元素时,不用再对其绑定事件
    • 节省大量内存,减少事件注册
    1. Vue中是否需要事件委托
    • 事件委托有两个主要优点:一个是实用的,它使我们不必分别添加(和删除)这些侦听器。Vue已经帮我们做到了。

    另一个是性能/内存。但是由于v-vor循环中的每个点击侦听器都将使用相同的回调,因此除非有成百上千的行,否则性能消耗是最小的。

    最后,您可以通过在元素上添加@click侦听< ul>器而不是子元素来轻松使用委派。但是随后,必须求助于点击目标,以评估数据中可能代表的项目。因此,只有在您真正发现任何性能问题而没有委托的情况下,才需要使用它。
    官网回答

    展开全文
  • vue 中怎么用事件委托

    2020-06-30 11:00:33
    哈喽,大家好,今天我要介绍一下vue中怎么使用事件委托吧!那说到事件委托,那什么是事件委托呢? 大佬就此略过吧,不懂得可以随便阅读一下. 事件委托概念: 那什么叫事件委托呢?事件委托也叫事件代理,JavaScript高级程序...

    哈喽,大家好,今天我要介绍一下vue中怎么使用事件委托吧!那说到事件委托,那什么是事件委托呢?
    大佬就此略过吧,不懂得可以随便阅读一下.

    事件委托概念:

    那什么叫事件委托呢?事件委托也叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。太官方了,不够明了,举个例子吧
    有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台小姐姐代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台小姐姐收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少,就是添加新的DOM节点),前台小姐姐也会在收到寄给新员工的快递后核实并代为签收。

    为什么要用事件委托

    说白了 就是提升性能用的.
    举个例子,如果你的现在有100个li,每个li都需要绑定一个点击事件,正常情况下你不会一个一个的去绑定吧?我嘞个乖乖类,猪脑子吧,100个,占用100个内存,引起的重绘重拍就不说了,就问你是不是其他公司派来的间谍,想把系统卡死啊!一个一个的绑定绝对是不现实的,那你该怎么办啊!这时候事件委托就排上用场了,只需要给他的父元素这一个对象进行操作就行了,1vs100,是不是短小精悍,一步到位,自己斟酌吧!

    事件委托的原理

    事件委托是利用事件的冒泡原理来实现的,有没有搞错啊,那什么是事件冒泡啊?就是事件从最深的节点开始,然后逐步向上传播事件

    事件委托的实现

    其实实际在项目中我们也是经常遇到可以使用事件委托的场景的,只是有时候节点比较少我们懒得用,更何况公司老板也发现不了是不是.例如,增删改查的四个按钮的,还有一些功能比较多的一排按钮的等等.
    这样的
    在这里插入图片描述
    那样的
    在这里插入图片描述
    到处都是的,自己用不用是自己的事情了

    <div id="box">
        <input id="add" type="button" value="添加" >
        <input id="remove" type="button" value="删除" >
        <input id="move" type="button" value="移动" >
        <input id="select" type="button" value="选择" >
      </div>
      
    
    // 这里需要在页面加载完成的钩子里,要是原生就用onload
    mounted() {
          var oBox = document.getElementById('box')
          oBox.onclick = function(ev) {
              console.log(ev, 'evt')
              var evt = ev || window.event
              var target = evt.target || evt.srcElement
              if (target.nodeName.toLocaleLowerCase() == 'input') {
                  switch (target.id) {
                  case 'add' :
                      alert('添加')
                      break
                  case 'remove' :
                      alert('删除')
                      break
                  case 'move' :
                      alert('移动')
                      break
                  case 'select' :
                      alert('选择')
                      break
                  default:
                      alert('default')
                  }
              }
          }
      }
    

    这样是可以解决你的问题的吧,但是可能还有一个场景,就是你要添加节点,添加的新的节点能否事件委托呢!既然能说的通的逻辑应该都可以用代码实现的,别担心试试看吧!

    <div id="box">
       <input id="btn" type="button" name="" value="添加" >
       <ul id="ul1">
         <li>111</li>
         <li>222</li>
         <li>333</li>
         <li>444</li>
       </ul>
     </div>
    
    mounted() {
           var oBtn = document.getElementById('btn')
           var oUl = document.getElementById('ul1')
           var aLi = oUl.getElementsByTagName('li')
           var num = 4
    
           // 事件委托,添加的子元素也有事件
           oUl.onmouseover = function(ev) {
               var evt = ev || window.event
               var target = evt.target || evt.srcElement
               if (target.nodeName.toLowerCase() == 'li') {
                   target.style.background = 'red'
               }
    
           }
           oUl.onmouseout = function(ev) {
               var evt = ev || window.event
               var target = evt.target || evt.srcElement
               if (target.nodeName.toLowerCase() == 'li') {
                   target.style.background = '#fff'
               }
    
           }
    
           // 添加新节点
           oBtn.onclick = function() {
               num++
               var oLi = document.createElement('li')
               oLi.innerHTML = 111 * num
               oUl.appendChild(oLi)
           }
       },
    

    具体问题具体分析就行了,没啥大惊小怪的,有其他的疑问,找度娘去吧!度娘人挺好的

    展开全文
  • 事件传递 ----冒泡和捕获DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡。和许多Web技 术一样,在它们成为标准之前,...默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和S...

    事件传递 ----冒泡和捕获

    DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡。

    和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。幸运的 是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

    默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true。

    冒泡事件流:

    在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通 过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。即从被点击的元素到此元素的祖先元素直至根元素,从下到上。

    捕获事件流:

    事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档 根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何 元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。即根元素到被点击的元素,从上到下。

    事件代理(委托)

    说明:事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)。

    原理:事件委托是利用事件的冒泡原理来实现的。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。

    使用原因:

    绑定事件太多,浏览器占用内存变大,严重影响性能;

    Ajax出现,局部刷新盛行,每次加载完,都要重新绑定事件;

    部分浏览器移除元素时,绑定的事件没有被及时移除,导致内存泄漏,严重影响性能;

    Ajax中重复绑定,导致代码耦合性过大,影响后期维护

    如下demo 01,列表在给新增或删除的列表项时,绑定或删除相应事件监听的工作枯燥并繁杂,而使用事件委托,将监听器安装在列表项的父元素上后,当子元素的事件冒泡到父ul元素时,只需要检查事件对象的target属性,捕获真正被点击的节点元素的引用。

    测试

    Item 1

    Item 2

    Item 3

    Item 4

    Item 5

    Item 6

    demo02 当需要给所有的a标签绑定click事件时使用事件委托,而部分a标签又包含图片img、span元素,用户希望点击span或img标签也能触发相应的click事件。这时就需要:从触发click事件的元素开始,逐级向上查找,直到找到a标签为止。代码如下

    document.addEventListener("click", function(e) {

    var node = e.target;

    while (node.parentNode.nodeName != "BODY") {

    if (node.nodeName == "A") {

    console.log("a");

    break;

    }

    node = node.parentNode;

    }

    }, false);

    JQuery中的事件委托

    jQuery中的事件委托方式比较丰富,如下

    1、用on方法,代码如下:

    $(function(){

    $("#lists").on("click","li",function(event){

    var target = $(event.target);

    target.css("background-color","red");

    })

    })

    2.用delegate()方法,代码如下:

    $(function(){

    $("#lists").delegate("li","click",function(event){

    var target = $(event.target);

    target.css("background-color","red");

    })

    })

    on()方法和delegate()方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素(本文中的li)会触发事件,而代为执行的父元素(本文中为ul)不会触发事件,所以我们不需要盘判断触发事件的元素节点名,这一点明显优于原生的JavaScript。

    3.用bind()方法,代码如下:

    $(function(){

    $("#lists").bind("click","li",function(event){

    var target = $(event.target);

    if(target.prop("nodeName")=="LI"){

    target.css("background-color","red");}

    })

    })

    bind()方法同原生的JavaScript实现方法一样,当父元素代子元素执行事件时,父元素也会触发事件,所以我们需要判断一下触发事件的元素名。此外,用bind()方法给元素绑定事件的时候要注意,它只能给已经存在DOM元素添加事件,不能给未来存在DOM

    元素添加添加事件。如果要频繁地添加DOM元素,并且给新添加的DOM元素绑定事件的话,用live(),delegate(),on()等方法。鉴于jQuery从1.7之后就不推荐live()和delegate()方法了,所以大家还是使用on()方法吧。

    vue中使用$event:

    vue中直接套用上述代码会报错(无法找到target),使用$event传入到vue组件方法中,如下

    Item 1

    Item 2

    vue中使用$event 获取当前元素、父子兄弟元素

    点击

    vue事件处理

    如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event,把它传入到methods中的方法中。

    在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有:

    .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡

    .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(比如阻止a链默认跳转和form表单提交,注意:如果事件可取消,则取消该事件,而不阻止事件的进一步传播)

    .capture:与事件冒泡的方向相反,事件捕获由外到内

    .self:只当事件在该元素本身(而不是子元素)触发时触发回调

    .once:只会触发一次

    ...

    ...

    .stop 阻止事件冒泡

    冒泡事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从内至外  子节点-》父节点的点击事件,如下

    点击我(^_^)

    {{ message }}

    在点击上加上.stop相当于调用了event.stopPropagation(),阻止了事件冒泡传递,点击子节点不会捕获到父节点的事件。代码如下

    点击我(^_^)

    {{ message }}

    效果如下,

    .prevent取消默认事件

    说明:该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

    如下可以阻止a超链接标签的默认跳转

    .native 修饰符

    .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。普通的标签使用.native修饰事件是无效的,如下

    测试native的作用

    组件上使用native的作用

    按键修饰符

    在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

    全部的按键别名:记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

    .enter

    .tab

    .delete (捕获 “删除” 和 “退格” 键)

    .esc

    .space

    .up

    .down

    .left

    .right

    可以通过全局 config.keyCodes 对象自定义按键修饰符:

    // 可以使用 v-on:keyup.f1

    Vue.config.keyCodes.f1 = 112

    展开全文
  • 大量的事件处理函数会影响性能: 事件处理函数本质上是一种函数,是一种对象,存放在内存中,设置大量...Vue中如何实现事件委托呢? 使用场景:后台管理项目中常见的列表项有一列操作按钮,我们通常是v-for列表渲染按钮并且

    大量的事件处理函数会影响性能:

    事件处理函数本质上是一种函数,是一种对象,存放在内存中,设置大量的事件处理函数会使内存中的对象变多,影响程序的性能和用户体验,所以为了更好的利益事件处理函数,可以巧用事件委托来提升性能

    什么是事件委托

    如果想要给若干个子节点绑定相同的事件(比如click),可以把事件统一绑定到父节点上,在父节点上统一处理从子节点冒泡上来的事件,这种技术叫做事件委托

    Vue中如何实现事件委托呢?

    使用场景:后台管理项目中常见的列表项有一列操作按钮,我们通常是v-for列表渲染按钮并且注册点击事件,此时若有100个按钮,则注册了100个事件 其实是不优雅的,此时可以巧用事件委托来实现
    首先要搞清 e.target和e.currentTarget的区别:

    1. e.target指向触发事件监听的对象。(在事件委托中 需要通过e.target拿到真正触发事件的元素 而不是绑定事件的父元素)

    2. e.currentTarget指向添加监听事件的对象.(在事件委托中,指向的是绑定了事件处理函数的父元素)

    然后就可以对我们的代码进行改造

     

      <template>
      <div>
      //事件处理函数绑定到父节点el-table上进行统一处理
        <el-table @click="handleClick">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="edit" label="操作">
            <template slot-scope="{ row }">
                //将id绑定到data-id
              <el-button type="primary" :data-id="row.id" title="edit"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {}
      },
      methods: {
        handleClick(e) {
        //通过e.target 判断触发元素是否是edit按钮 拿到唯一的id
          if(e.target.title === 'edit'){
            console.log(e.target.dataset.id);
          }
        }
      }
    }
    </script>

     

    展开全文
  • 使用事件委托和获取vue自定义属性完成下拉框选择数据 <ul @click.stop="handleClick"> <li v-for="item in list" :key='id' :data-index="item">{{item}}</li> </ul> methods:{ ...
  • ul> <li v-for="(item, index) in data" @click="handleClick(index)"> Click Me <...我们都知道,过多的事件对于性能来说是很糟糕的,尤其在移动端,可以说是无法容忍。为了更好...
  • 事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡。 和许多Web技 术一样,在它们成为标准之前,Netscape和...默认情况下,事件使用冒泡事件流,不使用捕获事件流。然而,在Fir...
  • 1.Vue基础语法Vue介绍Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。...Vue基础语法使用<引入Vue的核心JS文件<...
  • 高性能 javaScript 之事件委托(Vue版)

    千次阅读 2017-10-14 16:34:43
    一、概念理解: ...事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。 2、DOM 事件流:冒泡事件流、捕获...事件委托:即是,一个事件本来是要绑定到某个元素上,然而却绑定到了该元素的父(或祖先)
  • 先看几道面试题描述下js里面的事件流默认情况下,事件是在冒泡阶段执行还是捕获阶段执行请简要说明事件委托原理和使用场景手写原生js实现事件代理,注意浏览器兼容如果上面的面试题,您不能很顺利的作答,那么希望这...
  • 使用事件代理实现vue的手风琴组件

    千次阅读 2017-11-12 16:23:36
    使用事件代理(事件委托)写vue的手风琴组件,展示加载状态,实现分页加载数据。
  • 3.利用事件委托 e.target判断是否是自己想要的点击的dom元素 或者用settimeout也行 4.如果点击其他地方出现报错 就在 destory生命周期里面把事件移除掉 我这里就直接上代码 了 <template> <div class=".....
  • 使用vue-seamless-scroll做页面自动滚动的时候,在添加点击事件后...利用事件委托,在vue-seamless-scroll标签上一层添加@click="handleClick($event)",然后将要传给事件的参数通过:data赋值给函数的形参。 ...
  • 原生js事件绑定和事件委托

    千次阅读 2018-09-17 15:03:00
    最近常在移动端开发,由于不是大型站点,不需要使用vue等库,也不需要引用jquery和zepto等。 写得最多得就是各种元素选择器和事件绑定,操作下来也是有点烦人。这时候怀念起jquery的美好来了,但是仅为了这个引用...
  • halo 大家好我是 132,最近检查出鼻咽部一个肿瘤,整个人都不好了所以最近代码写的很少很少,但还是勉强起来写点eplayer 是 c 站御用播放器,没有使用 fre 或 vue 这种框架,而是直接使用的 web component,纯 dom ...
  • 使用vue的指令个事件冒泡委托给一个事件处理 使用data() {return {isMin:false,dataList:[{path: 'home',name: '服务组件',icon:"icon-shouye",children:[{name: '通知组件',path: 'layout',},]},{icon:"icon-shouye...
  • 使用Vue实现手风琴菜单效果

    千次阅读 2019-03-14 21:14:49
    使用vue的指令个事件冒泡委托给一个事件处理 使用 &lt;vertical-menu :menuList="dataList" :initIndex="0" @fold-body="foldHandle" @go-state="goWhere"&gt;&...
  • 地址 ...vue-seamless-scroll 无缝滚动 ...解决: 使用事件委托 GotoImage() <client-only> <scroll-seamless :data="list" :class="ScrollClass" :class-option="options" // 事件委托 @cli
  • 解决思路:利用js事件委托机制 原来是在li里面绑定事件出现上述问题,后来给最外层的父级div加委托事件,让父级事件执行。 通过e.target.dataset.code 获取所需值 备注: vue中自定义...
  • $(document).on(‘click’,’.card-type-btn’,function(){}) 可以 这是因为元素还没生成js就执行了,新生成的元素需要委托监听 $(’.card’).on(‘click’,function(){ //… })不可以 因为你直接使用的话是为已有的...
  • 1.背景 平时使用Vue 这个前端框架的同学,对于数据绑定这个词肯定不会陌生,进一步,它与 react 有点不同的是它还有一个双向数据绑定 v-model。 数据绑定的方式能够极大程度上方便我们开发,不用去进行繁琐的 DOM...
  • Vue项目常用优化方案

    2020-09-14 15:01:06
    工作中使用Vue+ElementUI开发后台管理项目 天天跟数据打交道,学到的东西真不多,工作又不好找,emmm,先来说说工作中用到的优化方法吧...4、v-for绑定事件使用事件委托 <ul @click='handleClick'> <li v-
  • Vue可做的性能优化

    2020-10-24 15:30:33
    如果需要使用v-for给每项元素绑定事件时使用事件委托 给每一个item添加一个自定义属性(:data-index=“可用从数据库中取来的item的id”),然后在事件代理中过滤掉事件委托的根节点,判断每一个item的data-index值...
  • vue项目的难点难点权限管理显示菜单的显示和隐藏跨域重写路由器对象上的push和replace方法性能优化缓存组件keep-alivevm.nextTick()事件委托(事件委派)节流和防抖 难点 权限管理 解析:在电商项目,只有在注册登录...
  • 提示框显示隐藏交互实现3.1 尝试方案1: click事件主动聚焦3.2 尝试方案2: blur事件添加延时器 + 开关变量3.3 尝试方案3: 不使用blur,关闭方法改为事件委托3.4 尝试方案4: onfocus + onblur + mousedown + 开关...
  • 实现了一个简单的计算器,使用了 Grid 布局,使用事件委托来分别处理不同按钮的点击,使用Vue.js 框架,使用了栈数据结构来处理十进制转二进制的运算,使用了递归来处理先乘除后加减的运算,然后通过条件判断来...
  • 实现了一个简单的计算器,使用了 Grid 布局,使用事件委托来分别处理不同按钮的点击,使用Vue.js 框架,使用了栈数据结构来处理十进制转二进制的运算,使用了递归来处理先乘除后加减的运算,然后通过条件判断来...
  • 修饰符说明 颜色加深得是我认为项目中用得比较躲得 事件修饰符 使用 作用说明 stop @click.stop=“” 阻止单击事件冒泡 prevent @submit.prevent ...只处理自身得事件,不触发事件委托 p...
  • 4、如果在setinterval等调用委托的地方使用vu对象的属性时,要使用Lambert表达式(箭头函数),否则this的作用域会出问题: 5、switch语句可以使用范围判断(只适用于js),如下: **************解读MVVM****...

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

vue使用事件委托

vue 订阅