body{
  background-color: #eee;
}
.outer {
  width: 200px;
  height: 200px;
  background-color: #bfa;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.inner {
  width: 100px;
  height: 100px;
  background-color: #fab;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

const outer = document.querySelector(".outer");
const inner = document.querySelector(".inner");

outer.addEventListener(
  "click",
  (e) => {
    console.log("outer CAPTURING:", e.eventPhase);
  },
  true
);
outer.addEventListener("click", (e) => {
  console.log("outer BUBBLING:", e.eventPhase);
});
inner.addEventListener("click", (e) => {
  console.log("inner CAPTURING:", e.eventPhase);
},true);
inner.addEventListener("click", (e) => {
  console.log("inner BUBBLING:", e.eventPhase);
});

// 1: CAPTURING_PHASE
// 2: AT_TARGET
// 3: BUBBLING_PHASE