HTMLDialogElement : événement close

Baseline Large disponibilité

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).

Dans cet article

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.

js
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

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

L'élément HTML <dialog>
L'interface Event

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 3 déc. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLDialogElement
Propriétés d'instance
Méthodes d'instance
Évènements
1. cancel
2. close
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript

HTMLDialogElement : événement close

Dans cet article

Syntaxe

Type d'événement

Exemples

Exemple interactif

HTML

JavaScript

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN