1. 面向开发者的 Web 技术
  2. Web API
  3. HTMLElement
  4. HTMLElement：toggle 事件

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

HTMLElement：toggle 事件

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

* Some parts of this feature may have varying levels of support.

HTMLElement 接口的 toggle 事件会在弹出框元素、<dialog> 元素或 <details> 元素刚刚显示或隐藏后触发。

  • 如果元素从隐藏过渡到显示，则 event.oldState 属性会被设置为 closed 而 event.newState 属性会被设置为 open。
  • 如果元素从显示过渡到隐藏，则 event.oldState 会是 open 而 event.newState 会是 closed。

此事件不可取消。

语法

在类似 addEventListener() 这样的方法中使用事件名称，或设置事件处理器属性。

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

ontoggle = (event) => {};

事件类型

ToggleEvent。继承自 Event。

Event ToggleEvent

示例

以下示例代码演示了如何使用弹出框的 toggle 事件。相同的代码也可以相同的方式用于 <dialog> 或 <details> 元素。

基础示例

此示例显示了如何监听 toggle 事件并记录结果。

HTML

html
<button popovertarget="mypopover">打开/关闭弹出框</button>
<div id="mypopover" popover>弹出框的内容</div>

JavaScript

以下代码为 toggle 事件添加事件处理器，并记录其状态。

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

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("已显示弹出框");
  } else {
    console.log("已隐藏弹出框");
  }
});

结果

关于 toggle 事件合并的备注

如果在事件循环开始一个循环之前触发了多个 toggle 事件，则只会触发一次事件。这被称为“事件合并”。

例如：

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

popover.showPopover();
popover.hidePopover();
// `toggle` 仅触发一次

其他示例

规范

Specification
HTML
# event-toggle

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content