title: querySelectorAll for any div within an element
body: <p>I'd expect this to pop up an alert for any div I click inside the section id <code>playGrid</code>, but it does nothing.</p>
  
  <pre><code>&lt;div id="playGrid" class="w"&gt;
    &lt;section&gt;
      &lt;div id="0_0"&gt;&lt;/div&gt;
      &lt;div id="0_1"&gt;&lt;/div&gt;
      &lt;div id="0_2"&gt;&lt;/div&gt;
      &lt;div id="0_3"&gt;&lt;/div&gt;
  
      &lt;div id="1_0"&gt;&lt;/div&gt;
      &lt;div id="1_1"&gt;&lt;/div&gt;
      &lt;div id="1_2"&gt;&lt;/div&gt;
      &lt;div id="1_3"&gt;&lt;/div&gt;
  
      &lt;div id="2_0"&gt;&lt;/div&gt;
      &lt;div id="2_1"&gt;&lt;/div&gt;
      &lt;div id="2_2"&gt;&lt;/div&gt;
      &lt;div id="2_3"&gt;&lt;/div&gt;
  
      &lt;div id="3_0"&gt;&lt;/div&gt;
      &lt;div id="3_1"&gt;&lt;/div&gt;
      &lt;div id="3_2"&gt;&lt;/div&gt;
      &lt;div id="3_3"&gt;&lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
    el.addEventListener('click', function() {
      alert(this.id);
    });
  });
  </code></pre>