如何添加一個事件監聽器到div的所有子節點以及這些div的數組中？

Question

我在教自己的JS，並試圖避免jQuery，直到我的JS技能更好。

目標：爲點擊事件添加一個eventlistener到某個類的所有div。讓該類的所有子節點都響應該事件。

我的HTML

<div class="grid-panel six columns"> 
      <div class="grid-panel-image"> 
       <i class="fa fa-css3"></i> 
      </div> 
      <div class="grid-panel-title"> 
       <h4>css3</h4> 
      </div>     
    </div> 
    <div class="grid-panel six columns"> 
     <div class="grid-panel-image"> 
      <i class="fa fa-paint-brush"></i> 
     </div> 
     <div class="grid-panel-title"> 
      <h4>tamberator</h4> 
     </div> 
    </div> 

我選擇使用所有.grid-panel的div這個JS

var gridPanels = document.querySelectorAll('.grid-panel'); 

然後，因爲它返回的div與類.grid-panel 我添加的事件偵聽器點擊一個數組因此

for(i=0; i<gridPanels.length; i++){ 
    gridPanels[i].addEventListener('click', myFunction); 
} 

我的功能是本

myFunction(){ 
    var e = event.target; 

     switch(e){ 
      case gridPanels[0]: 
      modalArray[0].setAttribute("data-modal-display", "show"); 
      break 
      case gridPanels[1]: 
      modalArray[1].setAttribute("data-modal-display", "show"); 
      break 
     } 

      console.log(e); 
    } 

這並不工作，如果我點擊.grid-panel DIV的一個非常具體的部分和e日誌特定元素。但是，單擊div的任何子項都會將e記錄爲我單擊的元素，但eventlistener不會應用於該元素。我在這個事件代表團顯然缺少一些東西。我真的希望這個函數能夠觸發點擊的div和它的所有子節點。

Answer 1

要綁定正確的，但如果你想獲得該處理函數在處理程序綁定的元素，那麼使用this或event.currentTarget代替event.target。

event.target代表被點擊的實際元素，這有時也很有用。

另外，您應該在函數中定義event參數。並非所有瀏覽器都可以將其作爲全局變量提供。

function myFunction(event){ 
    var e = this 
// var e = event.currentTarget // same as above 

    switch(e){ 
     case gridPanels[0]: 
     modalArray[0].setAttribute("data-modal-display", "show"); 
     break 

     case gridPanels[1]: 
     modalArray[1].setAttribute("data-modal-display", "show"); 
     break 
    } 

    console.log(e); 
}