HTMLElement: toggle Ereignis

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 ein Popover verwendet werden kann. Der gleiche Code kann auf <dialog> oder <details> Elemente auf die gleiche Weise angewendet werden.

Dieses Beispiel zeigt, wie Sie das toggle Ereignis überwachen und das Ergebnis protokollieren können.

HTML

Das HTML besteht aus einem Popover und einem Button, um es zu öffnen und zu schließen.

<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 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 der Ereignis-Loop die Chance hat, erneut zu durchlaufen, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Ereignis-Coalescing" 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