HTMLElement: событие toggle

Событие toggle интерфейса HTMLElement срабатывает на элементе поповера, элементе <dialog> или элементе <details> сразу после того, как он отобразился или скрылся.

• Если элемент переходит от скрытого к отображаемому, свойство event.oldState будет установлено в closed, а свойство event.newState будет установлено в open.
• Если элемент переходит от отображаемого к скрытому, тогда event.oldState будет open, а event.newState будет closed.

Это событие не является отменяемым.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

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

ontoggle = (event) => {};

A ToggleEvent. Наследуется от Event.

Приведенный ниже пример кода демонстрирует, как событие toggle может использоваться для поповера. Тот же код может использоваться для элементов <dialog> или <details> аналогичным образом.

Этот пример демонстрирует, как прослушать событие toggle и вывести результат.

HTML

HTML состоит из поповера и кнопки для его открытия и закрытия.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

JavaScript

Код добавляет обработчик события toggle и выводит состояние.

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 срабатывают до того, как цикл событий успевает выполнить свой цикл, будет выполнено только одно событие. Это называется «слиянием событий».

Например:

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

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

• Открытие модального диалогового окна пример в HTMLDialogElement

• popover Глобальное атрибут HTML
• API поповера
• Связанное событие: beforetoggle