HTMLElement: toggle event

Das toggle-Ereignis der HTMLElement-Schnittstelle wird bei einem Popover-Element, <dialog>-Element oder <details>-Element unmittelbar nach dem Anzeigen oder Verbergen ausgelöst.

• Wenn das Element von "versteckt" zu "angezeigt" wechselt, wird die Eigenschaft event.oldState auf closed und die Eigenschaft event.newState auf open gesetzt.
• Wenn das Element von "angezeigt" zu "versteckt" wechselt, wird event.oldState open sein und event.newState wird closed sein.

Dieses Ereignis ist nicht abbrechbar.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

Ereignistyp

Ein ToggleEvent. Erbt von Event.

Beispiele

Der folgende Beispielcode demonstriert, wie das toggle-Ereignis für Popover verwendet werden könnte. Der gleiche Code könnte auf ähnliche Weise für <dialog>- oder <details>-Elemente verwendet werden.

Einfaches Beispiel

Dieses Beispiel zeigt, wie man auf das toggle-Ereignis hört und das Ergebnis protokolliert.

HTML

Das HTML besteht aus einem Popover und einem Button zum Öffnen und Schließen des Popovers.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

<pre id="log"></pre>

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

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

JavaScript

Der Code fügt einen Event Listener für das toggle-Ereignis hinzu und protokolliert den Zustand.

const popover = document.getElementById("mypopover");
popover.addEventListener("toggle", (event) => {
 if (event.newState === "open") {
 console.log("Popover has been shown");
 } else {
 console.log("Popover has been hidden");
 }
});

Ergebnis

Ein Hinweis zur Ereigniszusammenfassung bei toggle-Ereignissen

Wenn mehrere toggle-Ereignisse ausgelöst werden, bevor die Ereignisschleife eine Chance hat, den Zyklus durchzuführen, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Ereigniszusammenfassung" bezeichnet.

Zum Beispiel:

popover.addEventListener("toggle", () => {
 // ...
});
popover.showPopover();
popover.hidePopover();
// `toggle` only fires once

Weitere Beispiele

• Öffnen eines modalen Dialogs Beispiel in HTMLDialogElement

Spezifikationen

Browser-Kompatibilität

Siehe auch

• popover HTML-Globalattribut
• Popover API
• Verwandtes Ereignis: beforetoggle