探究keyup和keydown事件

一、介绍

在前端开发中，代码执行通常与用户操作有关。用户操作中，常用的是键盘事件，其中keydown和keyup事件是最为常见的两种。这两种事件都可以用来监测用户按键，但它们有不同的触发时机和执行效果。接下来将详细介绍这两种事件。

二、keydown事件

keydown事件在用户按下键盘上任何一个键之后触发，其效果为向操作系统重复持续发送按下键盘的命令。也就是说，当用户长按某一个键时，这个事件会不停地执行，直到该键抬起。下面是一个简单的代码示例：


document.addEventListener('keydown', function(event) {
  console.log('按下了键' + event.key)
})

上述代码将会在键盘上的任何键被按下时，将事件信息输出到控制台上。

三、keyup事件

keyup事件在用户释放键盘上任何一个键之后触发，其效果为向操作系统发送释放键盘的命令。也就是说，当用户释放某一个键时，这个事件只会执行一次。下面是一个简单的代码示例：


document.addEventListener('keyup', function(event) {
  console.log('松开了键' + event.key)
})

上述代码将会在键盘上的任何键被释放时，将事件信息输出到控制台上。

四、keydown和keyup的区别

从上述代码示例中我们可以看出，keydown和keyup的差别在于事件触发的时机和执行次数。为了更好地理解这两种事件的差异，我们可以在代码中添加一些具体的应用场景来说明。

例如，在一个表单中，用户需要输入一段文本，假设这段文本只能含有数字和字母，其他的字符是无效的。下面是一段利用keydown事件的代码：


const input = document.querySelector('input');

input.addEventListener('keydown', function(event) {
  const code = event.keyCode;

  if ((code < 48 || code > 57) && // 不是数字
      (code < 65 || code > 90) && // 不是大写字母
      (code < 97 || code > 122)) {// 不是小写字母
    event.preventDefault();
  }
});

上述代码将会在用户按下任何除了数字和字母以外的键时，阻止默认的按键行为。这种情况下，由于keydown事件会不断地重复执行，如果不添加这个if判断，这个文本框会被禁止使用。

再举一个相反的情况，假设需要用户在窗口中控制小球的位置，利用键盘上的"上""下""左""右"键。下面是一段利用keyup事件的代码：


let position = {
  x: 0,
  y: 0
};

document.addEventListener('keyup', function(event) {
  switch(event.keyCode) {
    case 37:
      position.x -= 10; // 左移
      break;
    case 38:
      position.y -= 10; // 上移
      break;
    case 39:
      position.x += 10; // 右移
      break;
    case 40:
      position.y += 10; // 下移
      break;
  }

  document.querySelector('.ball').style.transform = 'translate(' 
    + position.x + 'px,' + position.y + 'px)';
});

上述代码将会在用户按下"上""下""左""右"键时，通过修改小球的位置实现控制。由于keyup事件只会触发一次，这段代码不会出现小球不受控制的情况。