divのすべてのchildnodesとそのdivの配列にイベントリスナーを追加するにはどうすればよいですか？

Question

私はJSを教えており、JSスキルが上がるまでjQueryを避けようとしています。

目的：クリックイベントのイベントリスナーを特定のクラスのすべての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要素の配列を返しますので、私は、クリックのイベントリスナーを追加し、これはその後、

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

をJS使用して、すべての.grid-panel divを選択そのように

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

私の機能は、私が.grid-panel div要素の非常に特定の部分とeログの特定の要素をクリックすると、この仕事をして、この

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); 
    } 

です。しかし、divの子をクリックすると、私がクリックした要素としてeが記録されますが、eventlistenerはその要素に適用されません。私は明らかにこのイベントの代表団で何かを逃しています。私は本当に、クリックされたdivとその子ノードのすべてで関数を起動させたい。

Answer 1

正しくバインドしていますが、ハンドラでハンドラがバインドされている要素を取得する場合は、event.targetの代わりにthisまたはevent.currentTargetを使用します。

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); 
}