CommandEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 度回転した恐竜の頭" />
イベントリスナーは 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} 度回転した恐竜の頭`;
});
仕様書
| Specification |
|---|
| HTML # commandevent |
ブラウザーの互換性
Loading…