jquery - Getting the correct event.target for parent elements in Javascript? -

first off using vanilla javascript (no frameworks).
trying click event listener on element doesn't exist yet doing (where parentelement exists already):

parentelement.addeventlistener( "click", function(e){     console.log(e.target) } ) 

the thing clicking looks this:

<a href="#" class="modal-close">     <i class="fa fa-times"></i> </a> 

i trying e.target match a tag matches i tag since being clicked. therefore if try , match a tag won't match.

console.log(e.target.tagname == "a") //false 

how can match a tag instead of it's child (the i tag).

i know if used jquery do:

$("parentelementthatexists").on("click","a.modal-close",function(e){... 

that work fine. not using jquery.

this works me

window.onload=function(){    var x = document.getelementbyid("x");    x.addeventlistener( "click", function(e){      console.log(e.target.tagname,e.target.parentnode.tagname)    })    x.innerhtml='<a href="#" class="modal-close"><i class="fa fa-times">click</i></a>'  }

<div id="x"></div>