
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Understanding JavaScript's Capture</title>
  <link rel="icon" href="https://fav.farm/🔥" />
</head>
<body class="bod">

  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>

<style>
  html {
    box-sizing: border-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  div {
    width: 100%;
    padding: 100px;
  }

  .one {
    background: thistle;
  }

  .two {
    background: mistyrose;
  }

  .three {
    background: coral;
  }
</style>

<button></button>
<script>

</script>
</body>
</html>