HTMLElement：beforetoggle 事件

基线 2024

新可用

自 2024 年 4 月起，此功能在最新的设备和浏览器版本中有效。此功能可能在较旧的设备或浏览器中无法正常工作。

beforetoggle 事件在 HTMLElement 接口的 popover 元素（即具有有效 popover 属性的元素）上触发， 就在其显示或隐藏之前。

  • 如果 popover 从隐藏状态转换为显示状态，则 event.oldState 属性将设置为 closed，event.newState 属性将设置为 open。
  • 如果 popover 从显示状态转换为隐藏状态，则 event.oldState 将为 open，event.newState 将为 closed。

语法

在 addEventListener() 等方法中使用事件名称，或者设置事件处理程序属性。

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

onbeforetoggle = (event) => {};

事件类型

一个 ToggleEvent。继承自 Event。

Event ToggleEvent

示例

基本示例

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

// ...

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

关于 toggle 事件合并的说明

值得注意的是，beforetoggle 事件会合并，这意味着如果在事件循环有机会循环之前触发了多个 beforetoggle 事件，那么只会触发一个事件。

例如

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

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

规范

规范
HTML 标准
# event-beforetoggle

浏览器兼容性

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

另请参阅