DOM

：

：

HTMLDialogElement：cancel イベント

　編集：2022.09.25 by T.A.

[Edge]。→

ユーザーが現在開いているダイアログを閉じたいと操作したときに <dialog> に発生します。例えば、ユーザーがブラウザーのユーザー インターフェイスの中で Esc キーを押したり、「ダイアログを閉じる」ボタンをクリックしたりしたときにブラウザーがこのイベントを発生させることがあります。

バブリング なし
キャンセル 可
インターフェイス Event
イベント ハンドラー プロパティ oncancel
例

mdn より

HTML： 

<dialog class="example-dialog">
    <button class="close" type="reset">Close</button>
</dialog>

<button class="open-dialog">Open dialog</button>

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

JavaScript： 

const result = document.querySelector('.result');
const dialog = document.querySelector('.example-dialog');
dialog.addEventListener('cancel', (event) => {
  result.textContent = 'dialog was canceled';
});

const openDialog = document.querySelector('.open-dialog');
openDialog.addEventListener('click', () => {
  if (typeof dialog.showModal === 'function') {
      dialog.showModal();
      result.textContent = '';
  } else {
      result.textContent = 'The dialog API is not supported by this browser';
  }
});

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

HTML： 

<DIALOG id=IdTest>
  <BUTTON id=IdTojiru>閉じる</BUTTON>
</DIALOG>
<BUTTON id=IdHiraku>ダイアログを開く</BUTTON>
<DIV id=IdLog></DIV>

JavaScript： 

function JobHiraku(eve){ //「開く」ボタンを押した時のイベント処理：
  IdTest.showModal();    //モーダル ダイアログとして表示。
//  IdTest.show();       //（モードレス ダイアログとして表示。）
//  IdTest.open=true;      //（ダイアログを開く。[Esc] では閉じられなかった。）
}
function JobTojiru(eve){ //「閉じる」ボタンを押した時のイベント処理：
  IdTest.open=false;     //ダイアログを閉じる。
}
function Job(eve){ //キャンセルされた時のイベント処理：
  IdLog.innerHTML="ダイアログは閉じられました。"
}
IdTest.oncancel=Job;        //イベント割り当て
IdHiraku.onclick=JobHiraku; //イベント割り当て
IdTojiru.onclick=JobTojiru; //イベント割り当て

showModal()だと [Esc]キーが利いてキャンセルになるようです。

→show()、open()。click、innerHTML。

テスト