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