Question

以下是您可以在家中或jsfiddle中尝试的一些代码：

el.addEventListener( 'keyup', function( e ) { 
    console.log( 'Keyup event' );
    console.log( e.keyCode );
} ); 
el.addEventListener( 'keypress', function( e ) { 
    console.log( 'Keypress event' );
    console.log( e.keyCode );
} );

为什么keyCode不同？

我可以理解为什么人们只应该使用按键，但我不明白的是，在键盘上给出相同的按键时，两个按键事件会给出不同的键码。

PS：我并不担心遗留浏览器支持，我在Chrome中试过这个并且感到很惊讶，并且无法找到解释。

Answer 1

这些事件的目的完全不同。使用keyup和keydown来识别物理密钥，使用keypress识别键入的字符。这两者是根本不同的任务，具有不同的事件;不要试图混合两者。特别是keyCode个keypress事件通常是多余的，不应该使用（旧IE中除外，但请参阅下面的链接文档以获取更多信息）;对于可打印的按键，它通常与which和charCode相同，但浏览器之间存在一些差异。

已经在另一个答案中链接的

Jan Wolter's article on key events是关于这个主题的权威词汇，并且有表格描述每种类型的关键事件和每个浏览器返回的每个不同属性的内容。

Answer 2

有一个good article on quirksmode.org正好回答了这个问题。您可能还想查看Unixpapa's results。

Answer 3

好吧，当我试图将用户的条目从表单的一个输入复制到表单的其他部分时，我偶然发现了一个区别，我已经锁定了该表单以供用户编辑。我发现，每当用户在完成输入时使用键移动到下一个标签时，当我使用eventListener到keypress时，在复制的条目中错过了最后一个键盘条目，并且使用keyup解决了这个问题。

因此，总之，Keypress在按下按键的瞬间听取状态，忽略按键结果，而按键按下后按键监听系统状态< strong>包括按键的结果。

keypress和keyup - 为什么keyCode不同？

3 个答案: