Invoker commands
CommandEvent インターフェイスは、有効な commandForElement および command 属性を持つボタン要素が対話型要素を呼び出そうとしている際にユーザーに通知するイベントを表します。
これは HTMLElement の command イベントのイベントオブジェクトであり、呼び出しコントロールが操作されたとき（例えばクリックまたは押下されたとき）のアクションを表します。
Event CommandEvent
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 135 | 135 | 144 | 26.2 | 135 | 26.2 | |
| HTML 属性 | ||||||
command | 135 | 135 | 144 | 26.2 | 135 | 26.2 |
commandfor | 135 | 135 | 144 | 26.2 | 135 | 26.2 |
| DOM API | ||||||
| command は CommandEvent インターフェイスの読み取り専用プロパティで、イベントが発信された時点での HTMLButtonElement.command プロパティの値を含む文字列を返します。 | 135 | 135 | 144 | 26.2 | 135 | 26.2 |
| CommandEvent() コンストラクターは、新しい CommandEvent オブジェクトを生成します。 | 135 | 135 | 144 | 26.2 | 135 | 26.2 |
| source は CommandEvent インターフェイスの読み取り専用プロパティで、指定されたコマンドを呼び出したコントロールを表す EventTarget を返します。 | 135 | 135 | 144 | 26.2 | 135 | 26.2 |
| command は HTMLButtonElement インターフェイスのプロパティで、このボタンで制御される要素で実行されるアクションを取得し、設定します。これに効果を持たせるには、commandfor を設定する必要があります。 | 135 | 135 | 144 | 26.2 | 135 | 26.2 |
| commandForElement は HTMLButtonElement インターフェイスのプロパティで、ボタンを通じて制御する要素を取得または設定します。 | 135 | 135 | 144 | 26.2 | 135 | 26.2 |
| command は HTMLElement インターフェイスのイベントで、 HTMLButtonElement に有効な HTMLButtonElement.commandForElement および HTMLButtonElement.command 値がある場合に制御される要素上で、ボタンが操作されたとき（例：クリックされたとき）に発生します。 | 135 | 135 | 144 | 26.2 | 135 | 26.2 |
基本構文
<button commandfor="my-dialog" command="show-modal">
Open the dialog
</button>
<dialog id="my-dialog">
<p>Content</p>
<button commandfor="my-dialog" command="close">Close</button>
</dialog>ライブデモ
Command-driven popover
Use command and commandfor to toggle a related popover without custom script.
実務での使いどころ
-
Invoker commands の活用
CommandEvent インターフェイスは、有効な commandForElement および command 属性を持つボタン要素が対話型要素を呼び出そうとしている際にユーザーに通知するイベントを表します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。