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>