HTMLElement : évènement toggle

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 ⁨janvier 2020⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

L'évènement toggle de l'interface HTMLElement se déclenche sur un élément de fenêtre contextuelle (popover en anglais), un élément HTML <dialog> ou un élément HTML <details> juste après qu'il a été affiché ou masqué.

Si la fenêtre contextuelle passe de masqué à affiché, la propriété event.oldState sera définie sur closed et la propriété event.newState sera définie sur open.
Si la fenêtre contextuelle passe d'affiché à masqué, alors event.oldState sera définie sur open et event.newState sera définie sur closed.

Cet évènement n'est pas annulable.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

addEventListener("toggle", (event) => { })

ontoggle = (event) => { }

Type d'évènement

Un objet ToggleEvent. Hérite de l'objet Event.

Exemples

L'exemple de code ci-dessous montre comment l'évènement toggle peut être utilisé pour un élément de fenêtre contextuelle (popover en anglais). Le même code peut être utilisé de la même manière pour un élément HTML <dialog> ou <details>.

Exemple simple

Cet exemple montre comment écouter l'évènement toggle et afficher le résultat dans la console.

HTML

Le code HTML se compose d'une fenêtre contextuelle et d'un bouton permettant de l'afficher ou de la masquer.

html

<button popovertarget="mafenetre">
  Afficher ou masquer la fenêtre contextuelle
</button>
<div id="mafenetre" popover>Contenu de la fenêtre contextuelle</div>

<pre id="journaux"></pre>

#journaux {
  height: 150px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const elementJournaux = document.querySelector("#journaux");
function log(text) {
  elementJournaux.innerText = `${elementJournaux.innerText}${text}\n`;
  elementJournaux.scrollTop = elementJournaux.scrollHeight;
}

JavaScript

Le code ajoute un écouteur d'évènement pour l'évènement toggle et enregistre l'état.

const fenetreContextuelle = document.getElementById("mafenetre");

fenetreContextuelle.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    log("La fenêtre contextuelle a été affichée");
  } else {
    log("La fenêtre contextuelle a été masquée");
  }
});

Resultat

Remarque sur l'agrégation des évènements `toggle`

Si plusieurs évènements toggle sont déclenchés avant que la boucle d'évènements ait eu la possibilité de s'exécuter, un seul évènement sera déclenché. On parle alors d'« agrégation d'évènements ».

Par exemple :

fenetreContextuelle.addEventListener("toggle", () => {
  // …
});

fenetreContextuelle.showPopover();
fenetreContextuelle.hidePopover();
// `toggle` est déclenché une seule fois

Spécifications

Specification
HTML # event-toggle

Compatibilité des navigateurs

Voir aussi

L'attribut HTML universel popover
L'API Popover
L'évènement associé : beforetoggle

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨5 janv. 2026⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content