HTMLElement: toggle event

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

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

ontoggle = (event) => { }

Ein ToggleEvent. Erbt von Event.

Der folgende Beispielcode demonstriert, wie das toggle-Ereignis für Popover verwendet werden könnte. Der gleiche Code könnte auf ähnliche Weise für <dialog>- oder <details>-Elemente verwendet werden.

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 zum Öffnen und Schließen des Popovers.

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

Ergebnis

Wenn mehrere toggle-Ereignisse ausgelöst werden, bevor die Ereignisschleife eine Chance hat, den Zyklus durchzuführen, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Ereigniszusammenfassung" bezeichnet.

Zum Beispiel:

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

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

• Öffnen eines modalen Dialogs Beispiel in HTMLDialogElement

• popover HTML-Globalattribut
• Popover API
• Verwandtes Ereignis: beforetoggle