API команд вызывающего элемента

Экспериментально: Это экспериментальная технология .
Перед использованием в продуктовой среде внимательно изучите таблицу совместимости браузеров.

API команд вызывающего элемента предоставляет способ декларативного назначения поведения кнопкам, позволяя управлять интерактивными элементами при нажатии на кнопку (щелчок или вызов с помощью нажатия клавиши, например, пробела или клавиши Enter).

Концепции и использование

В веб-приложениях часто используются элементы <button> для управления различными аспектами страницы, такими как открытие и закрытие поп-уведомлений или элементов <dialog>, форматирование текста и многое другое.

Исторически для создания таких элементов управления требовались обработчики событий JavaScript, добавленные к кнопке, которые затем вызывали API на контролируемом элементе. Свойства commandForElement и command предоставляют способ сделать это декларативно для ограниченного набора действий. Это может быть выгодно для встроенных команд, так как пользователю не нужно ждать загрузки и выполнения JavaScript для активации этих кнопок.

Атрибуты HTML

commandfor Экспериментально: Преобразует элемент <button> в кнопку, управляющую указанным интерактивным элементом; принимает в качестве значения идентификатор управляемого элемента.
command Экспериментально: Указывает действие, которое должно быть выполнено над элементом, управляемым элементом управления <button>, задаваемым атрибутом commandfor.

Интерфейсы

CommandEvent Экспериментально: Представляет собой событие, уведомляющее пользователя о том, что команда была выдана. Это объект события для события command. Событие срабатывает на элементе, на который ссылается commandForElement.

Расширения других интерфейсов

Свойства экземпляров

HTMLButtonElement.commandForElement: Получает и устанавливает элемент, управляемый кнопкой. JavaScript-эквивалент атрибута HTML commandfor.
HTMLButtonElement.command: Получает и устанавливает действие, которое должно быть выполнено над элементом, управляемым кнопкой. Отвечает за значение атрибута HTML command.

События

command событие: Срабатывает на элементе, на который ссылается кнопка.

Примеры

Создание декларативных поп-уведомлений

<button commandfor="mypopover" command="toggle-popover">
  Toggle the popover
</button>
<div id="mypopover" popover>
  <button commandfor="mypopover" command="hide-popover">Close</button>
  Popover content
</div>

Создание декларативных диалогов

<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
  <button commandfor="mydialog" command="close">Close</button>
  Dialog Content
</dialog>

Создание пользовательских команд

<button commandfor="my-img" command="--rotate-left">Rotate left</button>
<button commandfor="my-img" command="--rotate-right">Rotate right</button>
<img id="my-img" src="photo.jpg" alt="[add appropriate alt text here]" />

const myImg = document.getElementById("my-img");

myImg.addEventListener("command", (event) => {
  if (event.command == "--rotate-left") {
    myImg.style.rotate = "-90deg";
  } else if (event.command == "--rotate-right") {
    myImg.style.rotate = "90deg";
  }
});

Спецификации

Спецификация не найдена

Для api.CommandEvent,api.HTMLButtonElement.commandForElement,api.HTMLButtonElement.command данных спецификации не найдено.
Проверьте наличие проблем на этой странице или внесите недостающую spec_url в mdn/browser-compat-data. Также убедитесь, что спецификация включена в w3c/browser-specs.

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`Invoker_Commands_API`	предварительный просмотр	Нет	предварительный просмотр	Нет	предварительный просмотр	Нет	Нет	Нет	Нет	Нет	Нет

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`Invoker_Commands_API`	предварительный просмотр	Нет	предварительный просмотр	Нет	предварительный просмотр	Нет	Нет	Нет	Нет	Нет	Нет

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`CommandEvent`	предварительный просмотр	Нет	предварительный просмотр	Нет	предварительный просмотр	Нет	Нет	Нет	Нет	Нет	Нет
`Invoker_Commands_API`	предварительный просмотр	Нет	предварительный просмотр	Нет	предварительный просмотр	Нет	Нет	Нет	Нет	Нет	Нет
`command`	предварительный просмотр	Нет	предварительный просмотр	Нет	предварительный просмотр	Нет	Нет	Нет	Нет	Нет	Нет
`source`	предварительный просмотр	Нет	предварительный просмотр	Нет	предварительный просмотр	Нет	Нет	Нет	Нет	Нет	Нет

api.CommandEvent

Таблицы BCD загружаются только в браузере

api.HTMLButtonElement.commandForElement

Таблицы BCD загружаются только в браузере

api.HTMLButtonElement.command

Таблицы BCD загружаются только в браузере

См. также

command свойство
commandForElement свойство
CommandEvent интерфейс

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API