title: Getting the correct event.target for parent elements in Javascript?
body: <p>First off I am using vanilla javascript (no frameworks). <br/>
  I am trying to get a click event listener on an element that doesn't exist yet so I am doing this (where <code>parentElement</code> exists already): </p>
  
  <pre><code>parentElement.addEventListener( "click", function(e){
      console.log(e.target)
  } )
  </code></pre>
  
  <p>The thing I am clicking looks like this: </p>
  
  <pre><code>&lt;a href="#" class="modal-close"&gt;
      &lt;i class="fa fa-times"&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I am trying to get the <code>e.target</code> to match the <code>a</code> tag but it obviously matches the <code>i</code> tag since that is what is being clicked. Therefore if I try and match the <code>A</code> tag it won't match. </p>
  
  <pre><code>console.log(e.target.tagName == "A") //false
  </code></pre>
  
  <p>How can I match that <code>A</code> tag instead of it's child (the <code>i</code> tag). </p>
  
  <p>I know that if I used jQuery I could just do:</p>
  
  <pre><code>$("parentElementThatExists").on("click","a.modal-close",function(e){...
  </code></pre>
  
  <p>That would work just fine. But I am not using jQuery.</p>