← 返回首页

ToggleEvent - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

ToggleEvent

Baseline 2023 *

Newly available

Since November 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ToggleEvent インターフェイスは、ポップオーバー要素の状態が表示と非表示の間で切り替わるときにユーザーに通知するイベントを表します。

これは HTMLElement の beforetoggle および toggle イベントのためのイベントオブジェクトであり、表示中と非表示の間で遷移したときに（それぞれ前と後に）ポップオーバーで発行されます。

Event ToggleEvent

メモ: ToggleEvent は HTMLDetailsElement の toggle イベントとは関係ありません。こちらは <details> において、open/closed の状態が変化したときに発生します。こちらのイベントオブジェクトは一般的な Event です。

In this article

コンストラクター

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("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});

仕様書

Specification

HTML
# toggleevent

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年7月22日 by MDN contributors.

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

UI イベント
ToggleEvent
コンストラクター
1. ToggleEvent()
インスタンスプロパティ
継承
1. Event
UI Events に関連するページ
ガイド
1. キーボードイベントの code の値
2. キーボードイベントの key の値