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).
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) => { }
Type d'évènement
Un évènement Event générique.
Exemples
Gérer les évènements close
L'exemple suivant montre comment écouter les évènements close déclenchés par plusieurs méthodes différentes pour fermer une boîte de dialogue :
- Appel de la méthode
close() - Un formulaire avec
method="dialog". L'envoi du formulaire ferme ledialoget déclenche un évènementsubmit, sans envoyer de données ni vider le formulaire - La touche Échap.
Voir l'évènement
cancel
HTML
html
<dialog id="dialogue">
<form method="dialog">
<button type="submit">Fermer avec method="dialog"</button>
</form>
<p><button id="fermer">Fermer avec la méthode .close()</button></p>
<p>Ou appuyez sur la touche <kbd>Échap</kbd></p>
</dialog>
<button id="ouvrir">Ouvrir la boîte de dialogue</button>
JavaScript
js
const dialogue = document.getElementById("dialogue");
const boutonOuvrir = document.getElementById("ouvrir");
const boutonFermer = document.getElementById("fermer");
boutonOuvrir.addEventListener("click", () => {
journaliser("bouton ouvrir cliqué", true);
journaliser("dialogue showModal() appelé");
dialogue.showModal();
});
boutonFermer.addEventListener("click", () => {
journaliser("bouton fermer cliqué");
journaliser("dialogue close() appelé");
dialogue.close();
});
dialogue.addEventListener("close", (event) => {
journaliser("évènement close du dialogue déclenché");
});
Résultat
Spécifications
| Spécification |
|---|
| HTML # event-close |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<dialog>