<div id="parent">
  Parent
  <div id="child">
    Child
    <div id="descendant">Descendant</div>
  </div>
</div>
#parent,
#child,
#descendant {
  margin: 16px;
  padding: 16px;
  border: 4px solid #212121;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
}

#parent {
  background-color: #673ab7;
}

#child {
  background-color: #448aff;
}

#descendant {
  background-color: #ff9800;
}
const parent = document.querySelector("#parent");

parent.addEventListener("click", (event) => {
  console.log("event.target: ", event.target);
  console.log("event.currentTarget: ", event.currentTarget);
});
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.