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 事件提供事件对象，这两个事件会在弹出框元素在显示与隐藏状态间切换时（分别在切换前与切换后）触发。

Event ToggleEvent

备注： ToggleEvent 与 HTMLDetailsElement 的 toggle 事件无关，后者在 <details> 元素的 open/closed 状态被切换时触发。其事件对象是一个通用的 Event。

构造函数

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

参见