HTMLDialogElement : événement close

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2022.

L'événement close est déclenché sur un objet HTMLDialogElement lorsque l'élément <dialog> qu'il représente a été fermé.

Cet événement n'est pas annulable et ne remonte pas dans la chaîne d'événements (ne se « propage » pas).

Syntaxe

Utilisez le nom de l'événement dans des méthodes comme addEventListener(), ou affectez une fonction à la propriété gestionnaire d'événement.

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

onclose = (event) => { }

HTML

html

<dialog class="example-dialog">
  <form method="dialog">
    <button>Fermer via method="dialog"</button>
  </form>
  <button class="close">Fermer via la méthode .close()</button>
  <p>Ou appuyez sur la touche <kbd>Échap</kbd></p>
</dialog>

<button class="open-dialog">Open dialog</button>

<div class="result"></div>

button,
div {
  margin: 0.5rem;
}

JavaScript

const result = document.querySelector(".result");

const dialog = document.querySelector(".example-dialog");
dialog.addEventListener("close", (event) => {
  result.textContent = "La boîte de dialogue a été fermée";
});

const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
  dialog.showModal();
  result.textContent = "";
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
  dialog.close();
});