ToggleEvent: ToggleEvent() constructor

Baseline 2023

Newly available

Since ⁨November 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The ToggleEvent() constructor creates a new ToggleEvent object.

Syntax

new ToggleEvent(type, init)

Parameters

type

A string representing the type of event. In the case of ToggleEvent this is always beforetoggle or toggle.

init Optional

An object containing the following properties:

newState Optional: A string representing the state the element is transitioning to. Can be any value, but events fired by the browser set this to "open" or "closed". Defaults to "".
oldState Optional: A string representing the state the element is transitioning from. Can be any value, but events fired by the browser set this to "open" or "closed". Defaults to "".
source Optional: An Element representing the HTML popover control element that initiated the toggle. Defaults to null.

Examples

A developer would not use this constructor manually. A new ToggleEvent object is constructed when a handler is invoked as a result of a relevant event firing.

For example:

const popover = document.getElementById("mypopover");

// …

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
    if (event.source) {
      console.log("Initiated by:", event.source);
    }
  } else {
    console.log("Popover is being hidden");
  }
});