JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Event.target</h2>
<div id="no-child-element" class="box"></div>

<div id="has-child-element">
  <img src="https://via.placeholder.com/100" alt="">
</div>

<hr>
<h2>Event.currentTarget</h2>
<div id="no-child-element-currentTarget" class="box"></div>

<div id="has-child-element-currentTarget">
  <img src="https://via.placeholder.com/100" alt="">
</div>

CSS

.box {
  height: 100px;
  width: 100px;
  background: #2196f3;
}

img {
  display: block;
}

JavaScript

/* Event.target */
const noChildElement = document.getElementById('no-child-element');
const hasChildElement = document.getElementById('has-child-element');

noChildElement.addEventListener('click', event => console.log(event.target));
hasChildElement.addEventListener('click', event => console.log(event.target));

/* Event.currentTarget */
const noChildElementCurrentTarget = document.getElementById('no-child-element-currentTarget');
const hasChildElementCurrentTarget = document.getElementById('has-child-element-currentTarget');

noChildElementCurrentTarget.addEventListener('click', event => console.log(event.currentTarget));
hasChildElementCurrentTarget.addEventListener('click', event => console.log(event.currentTarget));