HTMLDialogElement: cancel イベント

addEventListener("cancel", (event) => { })

oncancel = (event) => { }

<dialog class="example-dialog">
  <button class="close">閉じる</button>
</dialog>

<button class="open-dialog">ダイアログを開く</button>

<div class="result"></div>

button,
div {
  margin: 0.5rem;
}

const result = document.querySelector(".result");

const dialog = document.querySelector(".example-dialog");

dialog.addEventListener("cancel", (event) => {
  result.textContent = "ダイアログがキャンセルされました";
});

const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
  if (typeof dialog.showModal === "function") {
    dialog.showModal();
    result.textContent = "";
  } else {
    result.textContent = "このブラウザーではダイアログ API に未対応です";
  }
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
  dialog.close();
});