HTMLElement: toggle event

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Das toggle-Ereignis des HTMLElement-Interfaces wird bei einem Popover-Element, einem <dialog>-Element oder einem <details>-Element unmittelbar nach dessen Anzeige oder Ausblenden ausgelöst.

  • Wenn das Element vom Zustand "versteckt" zu "sichtbar" wechselt, wird die Eigenschaft event.oldState auf closed und die Eigenschaft event.newState auf open gesetzt.
  • Falls das Element von "sichtbar" zu "versteckt" wechselt, wird event.oldState auf open und event.newState auf closed gesetzt.

Dieses Ereignis ist nicht cancelable.

Syntax

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

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

ontoggle = (event) => {};

Ereignistyp

Beispiele

Der folgende Beispielcode zeigt, wie das toggle-Ereignis für ein Popover verwendet werden kann. Der gleiche Code kann für ein <dialog>- oder <details>-Element auf die gleiche Weise verwendet werden.

Einfaches Beispiel

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

HTML

Das HTML besteht aus einem Popover und einem Button, um es zu öffnen und zu schließen.

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

JavaScript

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

js
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

Eine Anmerkung zur Zusammenfassung von toggle-Ereignissen

Wenn mehrere toggle-Ereignisse ausgelöst werden, bevor der Ereignisschleifen-Zyklus durchläuft, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Ereignis-Zusammenfassung" bezeichnet.

Zum Beispiel:

js
popover.addEventListener("toggle", () => {
  //...
});

popover.showPopover();
popover.hidePopover();
// `toggle` only fires once

Weitere Beispiele

Spezifikationen

Specification
HTML
# event-toggle

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
toggle event
toggle event fires at details elements
toggle event fires at dialog elements
toggle event fires at popover elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

Siehe auch