JS 事件委托

为什么要用事件委托？

在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。
为什么呢？
因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。
此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

var lists = document.getElementById("lists");

        lists.addEventListener("click",function(event){
            var target = event.target;
            //防止父元素ul也触发事件
            if(target.nodeName == "LI"){
               target.style.backgroundColor = "red";
            }
        })

在Vue中的事件委托

在HTML结构中绑定事件，并传入$event

<div class="panel" @click="rowClick1($event)">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <a href="#"></a>
</div>

  rowClick1(e){  
        if(e.target.localName === 'li'){
           console.log("触发事件1");            
        }else if(e.target.localName === 'a'){
      console.log("触发事件2");   
    }
  }