ToggleEvent

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

参见