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