CommandEvent
CommandEvent 接口表示一个事件，当拥有有效的 commandForElement 和 command 属性的 button 元素即将调用一个交互元素时，该事件会通知用户。
它是 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 角色]">
<!-- 弹出框内容 -->
<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 创建了三个按钮。
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} 度`;
});
规范
| 规范 |
|---|
| HTML # commandevent |