处理JavaScript中的键盘
1. 动作函数列表
创建一个对象字面量列表,包括您所需的函数。例如,如果您想要移动角色,以下是一些示例动作:
const Action = {
powerOn() { console.log("Accelerating..."); },
powerOff() { console.log("Decelerating..."); },
brakeOn() { console.log("Break activated"); },
brakeOff() { console.log("Break released"); },
exit() { console.log("Nice drive!"); },
};
PS:在实际情况下,每个函数都会包含处理字符的实际逻辑,无论是一次性的“移动N像素”,还是作为代理填充队列,然后由类似
Window.requestAnimationFrame的帧率引擎消耗。您还可以创建函数来更改颜色等。你已经得到了大致的想法。
2. 通过事件类型将按键关联到操作
将KeyboardEvent.key与所需的Action关联到所需的Event.type(←必须小写):
const keyAction = {
w: { keydown: Action.powerOn, keyup: Action.powerOff },
s: { keydown: Action.brakeOn, keyup: Action.brakeOff },
Escape: { keydown: Action.exit }
};
请注意,键名“w”、“s”和“Escape”被表示为
首选的KeyboardEvent.key
返回值,而不是数字
KeyboardEvent.keyCode
。我们是人类,不是机器人。
3. KeyboardEvent 处理程序
最后,让我们监听
"keyup"
和
"keydown"
事件,并触发回调函数
keyHandler
,该函数最终会触发我们特定的操作函数,例如:
keyAction["w"]["keydown"]()
,这实际上是我们飞船的
powerOn
操作函数!
const keyHandler = (ev) => {
if (ev.repeat) return;
if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return;
keyAction[ev.key][ev.type]();
};
['keydown', 'keyup'].forEach((evType) => {
document.body.addEventListener(evType, keyHandler);
});
结果:
const Action = {
powerOn() { console.log("Accelerating..."); },
powerOff() { console.log("Decelerating..."); },
brakeOn() { console.log("Break activated"); },
brakeOff() { console.log("Break released"); },
exit() { console.log("Nice drive!"); },
};
const keyAction = {
w: { keydown: Action.powerOn, keyup: Action.powerOff },
s: { keydown: Action.brakeOn, keyup: Action.brakeOff },
Escape: { keydown: Action.exit }
};
const keyHandler = (ev) => {
if (ev.repeat) return;
if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return;
keyAction[ev.key][ev.type]();
};
['keydown', 'keyup'].forEach((evType) => {
document.body.addEventListener(evType, keyHandler);
});
Click here to focus this window.<br>
Then, use [<kbd>W</kbd>], [<kbd>S</kbd>] or [<kbd>Esc</kbd>] keys on your keyboard.
您的具体请求示例:
const changeBG = (color) => document.body.style.background = color;
const Action = {
red() { changeBG("#f00"); },
yellow() { changeBG("yellow"); },
orange() { changeBG("orange"); },
reset() { changeBG(""); },
};
const keyAction = {
r: { keydown: Action.red, keyup: Action.reset },
y: { keydown: Action.yellow, keyup: Action.reset },
o: { keydown: Action.orange },
};
const keyHandler = (ev) => {
if (ev.repeat) return;
if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return;
keyAction[ev.key][ev.type]();
};
['keydown', 'keyup'].forEach((evType) => {
document.body.addEventListener(evType, keyHandler);
});
body { transition: background: 0.3s; }
Click here to focus this window. <br>Keys:<br>
[<kbd>Y</kbd>] for Yellow<br>
[<kbd>R</kbd>] for Red<br>
[<kbd>O</kbd>] to permanently set to Orange
e.which
替代e.keyCode
吗?https://dev59.com/_3VC5IYBdhLWcg3wbQXA#302161 - uross