HTMLElement: toggle-Ereignis

Das toggle-Ereignis der HTMLElement-Schnittstelle wird bei einem Popover-Element (d.h. einem Element, das ein gültiges popover-Attribut hat) unmittelbar nach dessen Anzeige oder Ausblendung ausgelöst.

  • Wenn sich das Popover-Element vom versteckten zum sichtbaren Zustand ändert, wird die Eigenschaft event.oldState auf closed und die Eigenschaft event.newState auf open gesetzt.
  • Wenn sich das Popover-Element vom sichtbaren zum versteckten Zustand ändert, wird event.oldState auf open und event.newState auf closed gesetzt.

Hinweis: Das toggle-Ereignis verhält sich anders, wenn es bei <details>-Elementen ausgelöst wird. In diesem Fall bezieht es sich nicht auf Popovers und wird stattdessen ausgelöst, wenn der open/closed-Zustand eines <details>-Elements umgeschaltet wird. Weitere Informationen finden Sie auf der Seite zum HTMLDetailsElement-toggle-Ereignis.

Syntax

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

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

ontoggle = (event) => {};

Ereignistyp

Ein ToggleEvent. Erbt von Event.

Event ToggleEvent

Beispiele

Einfaches Beispiel

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");
  }
});

Eine Anmerkung zur Zusammenführung von Toggle-Ereignissen

Es ist hervorzuheben, dass toggle-Ereignisse zusammengeführt werden, was bedeutet, dass, wenn mehrere toggle-Ereignisse ausgelöst werden, bevor die Ereignisschleife die Chance hat, sich zu drehen, nur ein einzelnes Ereignis ausgelöst wird.

Zum Beispiel:

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

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

Spezifikationen

Specification
HTML Standard
# event-toggle

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch