vue 中怎么用事件委托

哈喽,大家好,今天我要介绍一下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)
       }
   },

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