HTMLElement: beforetoggle-Ereignis

Das beforetoggle-Ereignis der HTMLElement-Schnittstelle tritt bei einem Popover-Element (d.h. einem Element mit einem gültigen popover-Attribut) auf, kurz bevor es angezeigt oder versteckt wird.

  • Wenn das Popover von versteckt auf sichtbar wechselt, wird die Eigenschaft event.oldState auf closed und die Eigenschaft event.newState auf open gesetzt.
  • Wenn das Popover von sichtbar auf versteckt wechselt, wird event.oldState open und event.newState closed sein.

Syntax

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

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

onbeforetoggle = (event) => {};

Ereignistyp

Ein ToggleEvent. Erbt von Event.

Event ToggleEvent

Beispiele

Einfaches Beispiel

js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});

Ein Hinweis zur Zusammenfassung von Toggle-Ereignissen

Es sei darauf hingewiesen, dass beforetoggle-Ereignisse zusammengefasst werden. Das bedeutet, dass, wenn mehrere beforetoggle-Ereignisse ausgelöst werden, bevor der Ereignis-Loop die Chance hat, zu zyklieren, nur ein einziges Ereignis ausgelöst wird.

Zum Beispiel:

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

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

Spezifikationen

Specification
HTML Standard
# event-beforetoggle

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch