javascript - 特定键的 keydown + keyup 事件

Question

我试图在按住某些键时改变背景颜色。例如，当按住“r”键时，背景应该是红色的。当不再按下“r”键时，背景应默认为白色。

$(document).ready(function () {
    $('body').keydown(function(e){
        if(e.keyCode == 114){
            $(this).css({'background':'red'});  
        }
        if(e.keyCode == 121){
            $(this).css({'background':'yellow'});
        }
    });
    $('body').keypress(function(e){
        if(e.keyCode == 114){
            $(this).css({'background':'red'});  
        }
        if(e.keyCode == 121){
            $(this).css({'background':'yellow'});
        }
    });
    $('body').keyup(function(e){
        if(e.keyCode == 114){
            $(this).css({'background':'white'});
        }
        if(e.keyCode == 121){
            $(this).css({'background':'white'});
        }
    });

});

我遇到的问题是 keyup 不是专门针对每个单独的键工作的。

    $('body').keyup(function(e){
        $(this).css({'background':'white'});
    });

我知道如果我从 keyup 中完全删除 if 条件，那么它会按照我说的那样运行——但我希望稍后能够在使用带有特定键的 keyup 时做不同的事情。例如，当只释放“b”键时，它可能会在屏幕上说“你刚刚释放了 b 键!”之类的话。我如何跟踪特定键的 keydown 和 keyup 事件并使每个事件发生不同的事情？我知道这也不是很有条理(我对这些东西很陌生)所以如果有一种完全不同且更好的方法来做到这一点......

Answer 1

在 JavaScript 中处理键盘

1。 Action 函数列表

用您想要的函数创建一个对象文字列表。假设您有一个想要移动的 Angular 色，这里有一些示例 Action :

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!");     },
  // clutch, colors, lights, fire... Add more, go wild!
};

PS: In a real-case scenario every single function would contain the actual logic to handle the character, being it a one-time "move-by-N-px", or act as a proxy to populate a queue which is than consumed by a frame-rate engine like Window.requestAnimationFrame. You can also create functions to change colors, etc. You got the general idea.

2。按 Event.type 将键与操作相关联

将 KeyboardEvent.key 关联到所需 Event.type 的所需 Action(← 必须小写):

const keyAction = {
  w:      { keydown: Action.powerOn,  keyup: Action.powerOff },
  s:      { keydown: Action.brakeOn,  keyup: Action.brakeOff },
  Escape: { keydown: Action.exit }
};

请注意键名 "w" "s" "Escape" 表示为 preferred KeyboardEvent.key 的返回值，而不是数字 KeyboardEvent.keyCode。我们是人，不是机器人。

3。键盘事件处理器

最后，我们来监听"keyup" "keydown"事件，触发一个回调函数keyHandler，最终会触发我们特定的 Action 函数，比如:keyAction["w"]["keydown"]() 这实际上是我们飞船的 powerOn Action 函数!

const keyHandler = (ev) => {
  if (ev.repeat) return; // Key-held, prevent repeated Actions (Does not work in IE11-)
  if (!(ev.key in keyAction) || !(ev.type in keyAction[ev.key])) return; // No such Action
  keyAction[ev.key][ev.type]();  // Trigger an Action
};

['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 }, // No keyup for this one :)
};

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