ToggleEvent

Baseline 2024

Newly available

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

ToggleEvent 接口表示当元素的状态发生改变时通知用户的事件。

它为 HTMLElement 的 beforetoggle 和 toggle 事件提供事件对象，这两个事件会在弹出框元素在显示与隐藏状态间切换时（分别在切换前与切换后）触发。它也为 HTMLDetailsElement 的 toggle 事件提供事件对象，这一事件会在 <details> 元素在展开和收起之间切换时触发。

Event ToggleEvent

构造函数

ToggleEvent()

创建一个 ToggleEvent 对象。

实例属性

此接口继承其父接口 Event 的属性。

ToggleEvent.newState 只读

一个字符串（取值为 "open" 或 "closed"），表示元素转换后的状态。

ToggleEvent.oldState 只读

一个字符串（取值为 "open" 或 "closed"），表示元素转换前的状态。

示例

基础示例

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

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("弹出窗口正在显示");
  } else {
    console.log("弹出窗口正在隐藏");
  }
});

规范

Specification
HTML Standard
# toggleevent

浏览器兼容性

BCD tables only load in the browser

参见