<div id="grandParent">
  GrandParent
    <div id="parent">
      Parent
        <div id="child">Child</div>
</div>
</div>  
body {
  font-family: sans-serif;
}

#grandParent {
  padding: 20px;
  background-color: green;
  display: flex;
}

#parent {
  padding: 20px;
  background-color: yellow;
}

#child {
  padding: 20px;
  background-color: blue;
}

a {
  margin: 0 10px;
  color: blue;
}
document.querySelector('#grandParent').addEventListener('click', () => {
  console.log('GrandParent click');
});

document.querySelector('#parent').addEventListener('click', () => {
  console.log('parent click');
});

document.querySelector('#child').addEventListener('click', () => {
  console.log('Child click');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.