Vue---原生js委托事件

在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>