keyup、keydown、keypress 和 input 事件有啥区别？

Posted 2023-02-21

【中文标题】keyup、keydown、keypress 和 input 事件有啥区别？

【英文标题】：What's the difference between keyup, keydown, keypress and input events?keyup、keydown、keypress 和 input 事件有什么区别？

【发布时间】：2016-11-24 22:44:24

【问题描述】：

我一直在尝试理解 jQuery keypress、keydown、keyup 和 input 事件。但我发现它们很混乱。有人可以指出确切的区别吗？另外我想知道当用户粘贴一段文字时，它们是否都会被触发。

【参考方案1】：

根据jQuery docs：

keypress 事件在浏览器注册键盘输入时发送到元素。这类似于 keydown 事件，不同之处在于修饰键和非打印键（如 Shift、Esc 和删除）会触发 keydown 事件，但不会触发 keypress 事件。这两个事件之间的其他差异可能会因平台和浏览器而异。

keyup 事件在用户释放键盘上的键时发送到元素。

oninput 事件是在输入发生变化时触发的事件。

但是 IE 9 以下的版本不支持输入事件。在这种情况下，您可以使用专有事件 onpropertychange，它的作用与 oninput 相同。

但在您的情况下，您可以同时使用 paste 和 change 事件。您也应该使用 change，因为 paste 仅在支持显式粘贴的浏览器上发生。

【讨论】：

至少在我正在测试的 chrome (63) 上，keypress 和 keydown 被触发 before 事件被处理，所以键事件没有改变输入的值，然而。另一方面，输入是在之后处理的。这意味着如果您访问输入值，您将在 keypress 和 keydown 事件侦听器上获得 previous 值。

@RSinohara - 这很有趣 - 我在 Linux 上使用 Chromium - “68.0.3440.106”（64 位）。我看到的行为是 EXACT 相反。去图吧。

如果你试图听用户敲击回车键来触发一些动作，你需要使用 keypress 或 keyup，因为 enter 不会改变字段值（所以输入不会触发） .

或者，在 keydown 中，您可以使用 setTimeout(()=>e.target.value, 0) 来获取添加键后的值（如果您使用的是 vanilla js）跨度>

@RSinohara 使用keyup 事件更新输入值