HTML | DOM 键盘事件

HTML | DOM 键盘事件指的是在 Web 页面中，当用户按下或松开键盘上的键时所触发的事件。这些键盘事件可以被绑定到任何 DOM 元素上，从而为用户提供更加响应式的交互体验。

常用键盘事件

常用的键盘事件包括：

• keydown：当用户按下键盘上的任意一个键时触发。该事件在用户按下按键时立即触发，无论按键是单击还是长按。
• keyup：当用户释放键盘上的任意一个键时触发。该事件在用户松开按键时触发。
• keypress：当用户按下键盘上的字符键时触发。如果按键不是字符键，则不会触发该事件。

以上三种事件均可绑定到任何 DOM 元素上。此外，还有一些特定于输入框和表单元素的键盘事件：

• input：当用户在输入框或文本区域中输入文本时触发，包括键盘输入、鼠标复制粘贴、拖放等操作。
• keydown 和 input：当用户输入文本时，先触发 keydown 事件，再触发 input 事件。
• keyup 和 input：当用户输入文本后松开键盘时，先触发 input 事件，再触发 keyup 事件。

键盘事件处理函数

键盘事件处理函数是指在键盘事件触发时所调用的 JavaScript 函数。当键盘事件被触发时，可以直接将所需的处理函数赋值给该事件的处理函数属性：

document.addEventListener('keydown', function(event) {
  console.log('Key ' + event.keyCode + ' is pressed');
});

上述代码中，我们为 keydown 事件绑定了一个匿名函数，该函数在用户按下键盘时被触发。event 参数表示当前的事件对象，它包含了触发该事件的相关信息，比如按下的键的代码（keyCode）、是否按下了修饰键（shiftKey、ctrlKey、altKey）等。

键盘事件对象

在键盘事件处理函数中，可以通过 event 参数获取当前触发的键盘事件的详细信息。键盘事件对象包括以下常用属性：

• keyCode：键码，表示按下的键的代码。常见的键码包括 Enter（13）、Esc（27）、Tab（9）等，完整的键码列表可参考键码表。
• ctrlKey、shiftKey、altKey：表示是否按下了对应的修饰键。
• metaKey：表示是否按下了 Command 键（在 Mac 上）或者 Windows 键（在 Windows 上）。
• which 和 charCode：用于表示按下了哪个字符键，但是在现代浏览器中已经不推荐使用，推荐使用 key 和 code 属性代替。

document.addEventListener('keydown', function(event) {
  console.log('keyCode: ' + event.keyCode); // 按键的代码
  console.log('shiftKey: ' + event.shiftKey); // 是否按下 Shift 键
  console.log('altKey: ' + event.altKey); // 是否按下 Alt 键
  console.log('metaKey: ' + event.metaKey); // 是否按下 Command 键（在 Mac 上）或者 Windows 键（在 Windows 上）
});

阻止默认事件

有些键盘事件会触发默认的浏览器行为，比如按下 Enter 键提交表单、按下 Esc 键关闭弹窗等。如果我们不想让默认的事件发生，可以使用 event.preventDefault() 方法阻止默认行为：

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) { // 按下 Enter 键
    event.preventDefault(); // 阻止表单提交
  }
});

总结

HTML | DOM 键盘事件为我们提供了与用户键盘交互的机制。我们可以通过绑定键盘事件来实现更加响应式的交互体验，同时还可以使用事件处理函数和事件对象来获取键盘事件的相关信息，并阻止默认的浏览器行为。