title: addEventListener to multiple elements, using Event Delegation (JavaScript)
body: <p>I'm trying to add an event to multiple elements. For now, I have this code and it works. But, <em>I want to use Event Delegation</em> and move the listener to the parent element (deck). I've tried so many solutions found here on Stack, but none of them it's working.<br>
  Question, which will be the best way to delegate the event?</p>
  
  <p><strong>HTML</strong>  </p>
  
  <pre><code>&lt;section class="deck"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;&lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;img src="#" alt=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;&lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;img src="#" alt=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      ...
  </code></pre>
  
  <p><strong>JavaScript</strong>  </p>
  
  <pre><code>var card = document.querySelectorAll(".card");
  var len = card.length;
  
  for (let i = 0; i &lt;= len; i++) {
      card[i].onclick = function () {
          this.classList.add("foo");
      }
  }
  </code></pre>