<div id="outer" class="outer">
  <div id="inner" class="inner"></div>
</div>
.outer {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #333;
}

.inner {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  background-color: #fff;
}
const outer = document.getElementById('outer')
outer.addEventListener(
  'click', 
  e => alert('outer event'),
  true
)

const inner = document.getElementById('inner')
inner.addEventListener(
  'click', 
  e => alert('inner event1'),
  true
)
inner.addEventListener(
  'click', 
  e => alert('inner event2'),
  true
)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.