<p>Click on either "Button", "Span", or "Bold" and check the output box:</p>
  
<button id="my_button">
  Button <span>Span <b>Bold</b></span>  
</button>

<div id="output"></div>

<p><code>eventTarget</code> is always BUTTON becuse this is the element in which the event was attached.</p>

#output {
  width: 400px;
  height: 90px;
  font-family: monospace;
  background: #111;
  color: green;
  padding: 10px;
  line-height: 2em;
  font-size: 20px;
  margin-top: 20px;
}

code {
  font-family: monospace;
}


* {
  font-family: sans-serif;
}

window.my_button.addEventListener("click", (event)=>{
  window.output.innerHTML = `
    <b>Event target:</b> ${event.target.tagName}<br/>
    <b>Event currentTarget:</b> ${event.currentTarget.tagName}
  `;
})