このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CommandEvent
Baseline
2025
最近利用可能
December 2025以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
CommandEvent インターフェイスは、有効な commandForElement および command 属性を持つボタン要素が対話型要素を呼び出そうとしている際にユーザーに通知するイベントを表します。
これは HTMLElement の command イベントのイベントオブジェクトであり、呼び出しコントロールが操作されたとき(例えばクリックまたは押下されたとき)のアクションを表します。
コンストラクター
CommandEvent()-
CommandEventオブジェクトを作成します。
インスタンスプロパティ
このインターフェイスには、親である Event から継承したプロパティがあります。
CommandEvent.source読取専用-
この呼び出しの発生源であるボタンを表す
HTMLButtonElementです。 CommandEvent.command読取専用-
ソースボタンの
command値を表す文字列です。
例
基本的な例
html
<button commandfor="mypopover" command="show-popover">ポップオーバーを表示</button>
<div popover id="mypopover" role="[適切な ARIA ロールを宣言]">
<!-- popover content here -->
<button commandfor="mypopover" command="hide-popover">ポップオーバーを非表示</button>
</div>
js
const popover = document.getElementById("mypopover");
// ...
popover.addEventListener("command", (event) => {
if (event.command === "show-popover") {
console.log("ポップオーバーが表示されようとしています");
}
});
コマンドのカスタム値の使用
この例では、カスタム値を持つ commands で 3 つのボタンが作成されています。
html
<div class="controls">
<button commandfor="the-image" command="--rotate-left">左へ回転</button>
<button commandfor="the-image" command="--reset">リセット</button>
<button commandfor="the-image" command="--rotate-right">右へ回転</button>
</div>
<img
id="the-image"
src="/shared-assets/images/examples/dino.svg"
alt="0 度回転した恐竜の頭" />
.controls {
margin-block-end: 20px;
}
イベントリスナーは command イベントを使用して画像に取り付けられています。ボタンがクリックされると、リスナーはボタンに割り当てられた独自の command 値に基づいてコードを実行し、画像を回転させると同時に、画像の新しい角度を示すために alt テキストを更新しています。
js
const image = document.getElementById("the-image");
image.addEventListener("command", (event) => {
let rotate = parseInt(event.target.style.rotate || "0", 10);
if (event.command === "--reset") {
rotate = 0;
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-left") {
rotate = rotate === -270 ? 0 : rotate - 90;
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-right") {
rotate = rotate === 270 ? 0 : rotate + 90;
event.target.style.rotate = `${rotate}deg`;
}
event.target.alt = `${rotate} 度回転した恐竜の頭`;
});
[フレーム]
仕様書
| 仕様書 |
|---|
| HTML # commandevent |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。