GeezerVison is showing developer.mozilla.org — ToggleEvent - Web APIs | MDN
ToggleEvent
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2023.
* Some parts of this feature may have varying levels of support.
The ToggleEvent interface represents an event that fires when a popover element is toggled between being shown and hidden.
This is the event object for the beforetoggle and toggle events, which fire on elements as follows:
- The
beforetoggle event fires before popover or <dialog> elements are shown or hidden.
- The
toggle event fires after popover, <dialog>, or <details> elements are shown or hidden.
This interface inherits properties from its parent, Event.
ToggleEvent.newState Read only-
A string (either "open" or "closed"), representing the state the element is transitioning to.
ToggleEvent.oldState Read only-
A string (either "open" or "closed"), representing the state the element is transitioning from.
ToggleEvent.source Read only-
An Element object instance representing the HTML control that initiated the toggle.
js
const popover = document.getElementById("mypopover");
// …
popover.addEventListener("beforetoggle", (event) => {
if (event.newState === "open") {
console.log("Popover is being shown");
} else {
console.log("Popover is being hidden");
}
});