ToggleEvent
The ToggleEvent
interface represents an event notifying the user when a popover element's state toggles between showing and hidden.
It is the event object for the HTMLElement
beforetoggle
and toggle
events, which fire on popovers when they transition between showing and hidden (before and after, respectively).
Constructor
ToggleEvent()
-
Creates an
ToggleEvent
object.
Instance properties
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.
Examples
Basic example
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");
}
});
Specifications
Specification |
---|
HTML Standard # toggleevent |
Browser compatibility
BCD tables only load in the browser