HTMLElement: toggle-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

ontoggle = (event) => { }

Ereignistyp

Ein ToggleEvent. Erbt von Event.

Beispiele

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

Einfaches Beispiel

Dieses Beispiel zeigt, wie Sie auf das toggle-Ereignis lauschen und das Ergebnis protokollieren.

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 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") {
    log("Popover has been shown");
  } else {
    log("Popover has been hidden");
  }
});

Ergebnis

Hinweis zur Zusammenfassung von toggle-Ereignissen

Wenn mehrere toggle-Ereignisse ausgelöst werden, bevor die Ereignisschleife einen Durchlauf abschließen kann, wird nur ein einziges Ereignis ausgelöst. Dies wird als „Event Coalescing“ bezeichnet.

Zum Beispiel:

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

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

Weitere Beispiele

• Beispiel zum Öffnen eines modalen Dialogs unter HTMLDialogElement

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Globales HTML-Attribut popover
• Popover API
• Verwandtes Ereignis: beforetoggle