在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> ???Vue---原生js委托事件
原文地址：https://www.cnblogs.com/preciousness/p/10315180.html