标签：获得 一个 数据 var 有一个 get 16px cdc oca
在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>
标签：获得 一个 数据 var 有一个 get 16px cdc oca
原文地址：https://www.cnblogs.com/preciousness/p/10315180.html
