HTMLElement: toggle event

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

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

ontoggle = (event) => {};

Ein ToggleEvent. Erbt von Event.

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

Dieses Beispiel zeigt, wie man dem toggle-Ereignis zuhört und das Ergebnis protokolliert.

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 Ereignis-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 der Ereignisschleifen-Zyklus durchläuft, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Ereignis-Zusammenfassung" bezeichnet.

Zum Beispiel:

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

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

• Öffnen eines modalen Dialogs Beispiel in HTMLDialogElement

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