HTMLDialogElement: close Event - Web-APIs

HTMLDialogElement: close Event - Web-APIs | MDN

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.

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>

#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");
});