HTMLDialogElement: close Event

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Das close-Ereignis wird auf einem HTMLDialogElement-Objekt ausgelöst, wenn das von ihm repräsentierte <dialog> geschlossen wurde.

Dieses Ereignis ist nicht abbrechbar und wird nicht weitergeleitet.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("close", (event) => { })
onclose = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Behandlung von `close`-Ereignissen

Dieses Beispiel zeigt, wie close-Ereignisse, die durch mehrere verschiedene Methoden zum Schließen eines Dialogs ausgelöst werden, erfasst werden können:

Aufruf der close()-Methode
Ein Formular mit method="dialog". Das Absenden des Formulars schließt den dialog und löst ein submit-Ereignis aus, ohne Daten zu übermitteln oder das Formular zu löschen
Die Esc-Taste. Siehe cancel-Ereignis

HTML

html

<dialog id="dialog">
 <form method="dialog">
 <button type="submit">Close via method="dialog"</button>
 </form>
 <p><button id="close">Close via .close() method</button></p>
 <p>Or hit the <kbd>Esc</kbd> key</p>
</dialog>
<button id="open">Open dialog</button>

<pre id="log"></pre>

#log {
 height: 170px;
 overflow: scroll;
 padding: 0.5rem;
 border: 1px solid black;
}

const logElement = document.getElementById("log");
function log(text, clear = false) {
 if (clear) {
 logElement.innerText = "";
 }
 logElement.innerText = `${logElement.innerText}${text}\n`;
 logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
openButton.addEventListener("click", () => {
 log("open button click event fired", true);
 log("dialog showModal() called");
 dialog.showModal();
});
closeButton.addEventListener("click", () => {
 log("close button click event fired");
 log("dialog close() called");
 dialog.close();
});
dialog.addEventListener("close", (event) => {
 log("dialog close event fired");
});