详解keyup和keydown事件

小蓝 • 2024-12-23 03:47 • 编程

一、key和keys的区别

键盘事件中经常会出现key和keys这两个术语，它们之间的区别是：key表示按下的是哪个键，而keys表示同时按下的多个键的组合情况。

例如：

// 键盘事件中获取到按下的键值
document.addEventListener('keydown', function(event) {
  console.log(event.key);
});

// 键盘事件中获取到同时按下的键值组合
document.addEventListener('keydown', function(event) {
  console.log(event.keys);
});

以上代码中，在keydown事件中，通过监听event.key可以获取到按下的具体键值，同时监听event.keys可以获取到当前按下的多个键值组合（当按下shift、ctrl、alt、meta键时）。

二、keydown是什么事件

keydown事件在按下键盘上的任意一个键时触发，常用于实现在输入框中监听按键输入的操作。

例如：

var input = document.querySelector('input');
input.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') { // 当按下Enter键时
    console.log('你按下了Enter键');
  }
});

以上代码中，在监听输入框的keydown事件时，判断按下的键值是否为Enter，从而实现相应的操作。

三、keyone和key2区别

keyone和key2并不是键盘事件中的术语，这里假设指的是在键盘事件中的key和keyCode这两个属性。

key是事件属性，表示按下的是哪个键，keyCode是事件属性，表示按下的是哪个键的键码值。

例如：

var input = document.querySelector('input');
input.addEventListener('keydown', function(event) {
  console.log(event.key); // 按下的键
  console.log(event.keyCode); // 按下的键的keyCode
});

以上代码中，通过监听输入框的keydown事件，分别通过event.key和event.keyCode来获取到按下的键和键码值。

四、输入框中获取按键输入

在输入框中获取按键输入的功能在实际开发中非常常见，它可以通过监听输入框的keydown或keyup事件来实现。

例如：

var input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
  console.log(input.value); // 获取输入框中的值
});

以上代码中，在监听输入框的keyup事件时，通过input.value来获取输入框中的值，从而实现获取按键输入的操作。

五、阻止默认事件

在一些情况下，我们需要阻止默认的键盘事件，例如阻止按下Backspace键时浏览器自动返回历史记录。

可以通过event.preventDefault()来阻止事件的默认行为。

例如：

document.addEventListener('keydown', function(event) {
  if (event.key === 'Backspace') {
    event.preventDefault();
  }
});

以上代码中，在监听document的keydown事件时，判断按下的键是否为Backspace，如果是则通过event.preventDefault()阻止浏览器自动返回历史记录。

六、总结

keyup和keydown是常用的键盘事件，它们分别在释放按键和按下按键时触发，常用于实现输入框的输入、阻止默认键盘事件等功能。

在使用键盘事件时，需要注意key和keyCode、key和keys之间的区别，根据具体的需求选择相应的事件和属性。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286330.html