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>

Vue---原生js委托事件

猜你喜欢