title: Javascript Event Delegation issue with target
body: <p>I have this HTML (example):</p>
  
  <pre><code>&lt;div class="a"&gt;
    &lt;div class="b"&gt;
      &lt;img src="..."&gt;
      &lt;p&gt;text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="b"&gt;
      &lt;img src="..."&gt;
      &lt;p&gt;text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="b"&gt;
      &lt;img src="..."&gt;
      &lt;p&gt;text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have like, 1000 of the <code>div.b</code>. I need to add event listener to <code>div.a</code> and target the <code>div.b</code> children.</p>
  
  <p>However the <code>event.target</code> may also be <code>img</code>, or <code>p</code>:</p>
  
  <pre><code>document.querySelector('.a').addEventListener('click', handler);
  
  function handler(e){
     console.log(e.target); //either .b or img or p depending on where I click
  }
  </code></pre>
  
  <p>I need something like this (jQuery):</p>
  
  <pre><code>$('.a').on('click', '.b', function(){
     //code
  });
  </code></pre>