HTMLDialogElement: close event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.
Das close-Ereignis wird auf einem HTMLDialogElement-Objekt ausgelöst, wenn das von ihm dargestellte <dialog> geschlossen wurde.
Dieses Ereignis kann nicht abgebrochen werden und löst keine Bubbling aus.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
js
addEventListener("close", (event) => { }) onclose = (event) => { } Ereignistyp
Ein generisches Event.
Beispiele
Live-Beispiel
HTML
html
<dialog class="example-dialog"> <form method="dialog"> <button>Close via method="dialog"</button> </form> <button class="close">Close via .close() method</button> <p>Or hit the <kbd>Esc</kbd> key</p> </dialog> <button class="open-dialog">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 = "dialog was closed"; }); const openDialog = document.querySelector(".open-dialog"); openDialog.addEventListener("click", () => { dialog.showModal(); result.textContent = ""; }); const closeButton = document.querySelector(".close"); closeButton.addEventListener("click", () => { dialog.close(); }); Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # event-close |