HTMLDialogElement: close-Ereignis

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Dieses Ereignis kann nicht abgebrochen werden und steigt nicht auf.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onclose = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

`close`-Ereignisse behandeln

Dieses Beispiel zeigt, wie Sie auf close-Ereignisse reagieren, die durch verschiedene Methoden zum Schließen eines Dialogs ausgelöst werden:

Aufrufen der Methode close()
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 zurückzusetzen
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");
});