在Jquery中on()方法做事件委托是非常方便的。在vue中数据和视图分离，不需要像jquery那样频繁操作dom元素，所以在vue中引入jquery库就不是那么必要。但是有时候我们依然需要做事件代理，下面用原生js来封装一个事件代理的全局方法：

　　之前看到其他博客上提供的方法(这种方法并不合适):

　　在父元素上绑定点击事件

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

　　这样来实现:使用e.target可以获得点击时获取的所有属性与值,我们可以通过e.target.localName获取点击的标签名,来进行对比判断,相同则触发绑定事件

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

  　　不足之处: 例如在此例中   假如 li标签中还有子元素,例如li中有一个span标签,当鼠标点击到li中的span时,此时的 e.target 是li的子元素span,         语句:     if(e.target.localName === ‘li‘){ console.log("触发事件1"); }  不能满足需求

下面是我改进的方法:

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

 实现方法:e.path 是事件触发点上冒泡所经过的所有dom元素,  e.currentTarget.querySelectorAll(selector)  通过父元素找到 需要委托事件的元素,判断dom对象相同,触发事件

<script> rowClick1(e){ var tagArr = e.currentTarget.querySelectorAll(‘li‘) var elArr = e.path var flag = true; for(var i=0;i<tagArr.length;i++){ var tagEl = tagArr[i] for(var j=0;j<elArr.length;j++){ if(tagEl === elArr[j]){ callback(elArr[j]); } if(e.currentTarget === elArr[j]){ flag = false; break; // 循环到父元素时,终止循环,因为我们只需要为处理委托挂载点的子元素 } } if(!flag){ break; } }}</script>