title: How do I add an event listener to all the childnodes of a div in and array of those div?
body: <p>I'm teaching myself JS and trying to avoid jQuery until my JS skills are better.</p>
  
  <p>Goal: add an eventlistener, for click event, to all the divs of a certain class.  Have all the child nodes of that class respond to the event.</p>
  
  <p>My HTML</p>
  
  <pre><code> &lt;div class="grid-panel six columns"&gt;
              &lt;div class="grid-panel-image"&gt;
                  &lt;i class="fa fa-css3"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div class="grid-panel-title"&gt;
                  &lt;h4&gt;css3&lt;/h4&gt;
              &lt;/div&gt;                  
      &lt;/div&gt;
      &lt;div class="grid-panel six columns"&gt;
          &lt;div class="grid-panel-image"&gt;
              &lt;i class="fa fa-paint-brush"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="grid-panel-title"&gt;
              &lt;h4&gt;tamberator&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I select all the <code>.grid-panel</code> divs using this JS</p>
  
  <pre><code>var gridPanels = document.querySelectorAll('.grid-panel');
  </code></pre>
  
  <p>then, since that returns an array of divs with the class <code>.grid-panel</code>
  I add the event listener for click as such</p>
  
  <pre><code>for(i=0; i&lt;gridPanels.length; i++){
      gridPanels[i].addEventListener('click', myFunction);
  }
  </code></pre>
  
  <p>my function is this</p>
  
  <pre><code> 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);
      }
  </code></pre>
  
  <p>This does work if I click a very specific part of the <code>.grid-panel</code>div and the <code>e</code> logs that specific element.  However, clicking any children of the div logs the <code>e</code> as the element i clicked, but the eventlistener is not applied to that element.  I'm clearly missing something here with this event delegation.  I really want the function to fire on the div clicked and all of its childnodes.</p>