HTMLElement: toggle event

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

Das folgende Beispielcode zeigt, wie das toggle-Ereignis bei einem Popover verwendet werden kann. Der gleiche Code kann auf dieselbe 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, mit dem es geöffnet und geschlossen werden kann.

<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 Ereignislistener für das toggle-Ereignis hinzu und protokolliert den Status.

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

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

Ergebnis

Eine Anmerkung zur Zusammenfassung von Toggle-Ereignissen

Wenn mehrere toggle-Ereignisse ausgelöst werden, bevor die Ereignisschleife eine Chance hat, einen Zyklus durchzuführen, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Ereigniscoalescen" 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