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();
});