title: Add event listener to all document children by tag name
body: <p>I need to translate this jquery to vanilla js:</p>
  
  <pre><code>$(document).on('click', 'a', function(){
      //do something
  });
  </code></pre>
  
  <p>I've tried with</p>
  
  <pre><code>document.addEventListener('click', function(e) {
      if(e.target.tagName === 'A')
      {
          //do something
      }
  });
  </code></pre>
  
  <p>But it's not working if the element clicked is a child of an <code>a</code>, for example</p>
  
  <pre><code>&lt;a href="..."&gt;
      &lt;!-- if I click on the image, e.target.tagName === 'IMG' --&gt;
      &lt;img src="img.jpg"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I can't use <code>document.getElementsByTagName('a')</code>, because It should work even with those created dynamically. </p>
  
  <p>Also, I'd need to access the <code>href</code> property of the <code>a</code>.</p>
  
  <p>What is the simplest way to do this? </p>