.main {
  padding: 4rem;
  background-color: blue;
}
.form {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 4rem;
  background-color: green;

  cursor: pointer;
}
.button {
  padding: 4rem;
  background-color: red;
  border: 0;
  color: white;
  font-size: 2rem;
  font-weight: bold;

  cursor: pointer;
}

(() => {
  const $main = document.querySelector("main");
  const $form = document.querySelector("form");
  const $button = document.querySelector("button");

  [$main, $form, $button].forEach((v, i, self) => {
    v.addEventListener(
      "click",
      (e) => {
        $button.innerText += e.currentTarget.dataset.type + "\n";

        setTimeout(() => {
          $button.innerText = "";
        }, 3000);
      }
      // (1)
      // { capture: true }
    );
  });
})();