KeyDown、KeyPress、KeyUp：有什么区别以及何时应该使用它们？

理解 onKeyPress 与 onKeyUp 与 onKeyDown

在寻找这三个事件之间的差异时，您可能会遇到一个常见的误解，即 onKeyPress 与 onKeyUp 同时发生。让我们澄清这种困惑，并阐明每个事件的独特特征。

事件时间线

在关键输入事件的序列中，我们有以下细分：

1. onKeyDown: 当用户首次按下 a 时触发键。
2. onKeyPress: 已弃用，建议使用 onKeyDown 代替。 当用户按下并释放某个键时发生此事件，实际上是 onKeyDown 和 onKeyDown 的组合onKeyUp.
3. onKeyUp: 用户松开时触发

与鼠标事件的类比

为了掌握这些按键事件之间的关系，让我们与它们的鼠标对应事件进行类比：

• onKeyDown：相当于MouseDown
• onKeyPress：相当于Click（现在已弃用并被 onKeyDown 取代）
• onKeyUp：相当于 MouseUp

浏览器例外：WebKit

在 Web 浏览器的世界中，WebKit 通过引入额外的功能而脱颖而出事件：文本输入。 WebKit 的事件序列因此变为：

keydown
keypress
textInput     
keyup

实际演示

要见证这些事件的实际运行，请运行以下代码片段：

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

此脚本记录当您与键盘交互时，将事件类型发送到控制台。当您按下和释放按键时，您会注意到不同的事件顺序。

以上是KeyDown、KeyPress、KeyUp：有什么区别以及何时应该使用它们？的详细内容。更多信息请关注PHP中文网其他相关文章！