HTMLDialogElement: close イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.
close イベントは HTMLDialogElement オブジェクト上で、これが表すダイアログ (<dialog>) が閉じられたときに発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。
js
addEventListener("close", (event) => { }) onclose = (event) => { } イベント型
一般的な Event です。
例
ライブ例
HTML
html
<dialog class="example-dialog"> <form method="dialog"> <button>method="dialog" で閉じる</button> </form> <button class="close">.close() メソッドで閉じる</button> <p>または <kbd>Esc</kbd> キーを押してください</p> </dialog> <button class="open-dialog">ダイアログを開く</button> <div class="result"></div> JavaScript
js
const result = document.querySelector(".result"); const dialog = document.querySelector(".example-dialog"); dialog.addEventListener("close", (event) => { result.textContent = "ダイアログが閉じました"; }); const openDialog = document.querySelector(".open-dialog"); openDialog.addEventListener("click", () => { dialog.showModal(); result.textContent = ""; }); const closeButton = document.querySelector(".close"); closeButton.addEventListener("click", () => { dialog.close(); }); 結果
仕様書
| Specification |
|---|
| HTML # event-close |