HTMLElement: 切换事件

基线 2024

新可用

自 2024 年 4 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能无法在旧设备或浏览器中使用。

的 toggle 事件 HTMLElement 接口在 弹出窗口 元素（即具有有效 popover 属性的元素）上触发，紧接其显示或隐藏之后。

  • 如果弹出窗口元素从隐藏状态转换为显示状态，则 event.oldState 属性将设置为 closed，而 event.newState 属性将设置为 open。
  • 如果弹出窗口元素从显示状态转换为隐藏状态，则 event.oldState 将为 open，而 event.newState 将为 closed。

注意：toggle 事件在 <details> 元素上触发时，行为有所不同。在这种情况下，它与弹出窗口无关，而是在 <details> 元素的 open/closed 状态切换时触发。有关详细信息，请参阅 HTMLDetailsElement 的 toggle 事件页面。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("toggle", (event) => {});

ontoggle = (event) => {};

事件类型

一个 ToggleEvent。继承自 Event。

Event ToggleEvent

示例

基本示例

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

// ...

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover has been shown");
  } else {
    console.log("Popover has been hidden");
  }
});

关于切换事件合并的说明

值得指出的是，toggle 事件是合并的，这意味着如果在事件循环有机会循环之前触发了多个 toggle 事件，则只会触发一个事件。

例如

js
popover.addEventListener("toggle", () => {
  //...
});

popover.showPopover();
popover.hidePopover();
// `toggle` only fires once

规范

规范
HTML 标准
# event-toggle

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见