このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTMLElement: command イベント

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

commandHTMLElement インターフェイスのイベントで、 button に有効な commandForElement および command 値がある場合に制御される要素上で、ボタンが操作されたとき(例:クリックされたとき)に発生します。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("command", (event) => { })

oncommand = (event) => { }

イベント型

CommandEvent です。Event を継承しています。

Event CommandEvent

基本的な例

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

// …

popover.addEventListener("command", (event) => {
  if (event.action === "show-popover") {
    console.log("ポップオーバーが表示されようとしています");
  }
});

イベントの配信とキャンセル

特筆すべきは、command イベントは呼び出された要素上で発生する点です。ボタンがクリックされると、まず click イベントが発信されます。この click イベントがキャンセルされた場合、command イベントは発生せず、デフォルトの動作も実行されません。 ボタンの click イベントをキャンセルするだけでなく、command イベント自体をキャンセルすることも可能です。

例を示します。

js
button.addEventListener("click", (event) => {
  event.preventDefault(); // `command` イベントは発生しない
});
js
element.addEventListener("command", (event) => {
  event.preventDefault(); // `command` イベントは発生するが、デフォルトの動作はキャンセルされる
});

仕様書

Specification
HTML
# event-command

ブラウザーの互換性

関連情報