这三件事有什么不同?在谷歌上我发现:

当用户按下一个键时,onKeyDown事件被触发。 当用户释放密钥时触发onKeyUp事件。 当用户按下并释放一个键时触发onKeyPress事件 (onKeyDown紧接着onKeyUp)。

我理解前两个,但不是onKeyPress相同的onKeyUp?是否有可能释放一个键(onKeyUp)而不按它(onKeyDown)?

这有点混乱,有人能帮我解释一下吗?


当前回答

似乎onkeypress和onkeydown做的是一样的(在上面已经提到的快捷键的小差异中)。

你可以试试这个:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

你会看到onkeypress和onkeydown事件都是在按下键时触发的,而不是在按下键时触发的。

不同之处在于,事件不是一次触发,而是多次触发(只要您按住键)。要意识到这一点,并相应地处理它们。

其他回答

这篇由Jan Wolter撰写的文章是我所见过的最好的文章,如果链接失效,你可以在这里找到存档副本。

它很好地解释了所有浏览器键事件,

The keydown event occurs when the key is pressed, followed immediately by the keypress event. Then the keyup event is generated when the key is released. To understand the difference between keydown and keypress, it is useful to distinguish between characters and keys. A key is a physical button on the computer's keyboard. A character is a symbol typed by pressing a button. On a US keyboard, hitting the 4 key while holding down the Shift key typically produces a "dollar sign" character. This is not necessarily the case on every keyboard in the world. In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. In practice, this is not always the way it is implemented. For a while, some browers fired an additional event, called textInput, immediately after keypress. Early versions of the DOM 3 standard intended this as a replacement for the keypress event, but the whole notion was later revoked. Webkit supported this between versions 525 and 533, and I'm told IE supported it, but I never detected that, possibly because Webkit required it to be called textInput while IE called it textinput. There is also an event called input, supported by all browsers, which is fired just after a change is made to to a textarea or input field. Typically keypress will fire, then the typed character will appear in the text area, then input will fire. The input event doesn't actually give any information about what key was typed - you'd have to inspect the textbox to figure it out what changed - so we don't really consider it a key event and don't really document it here. Though it was originally defined only for textareas and input boxes, I believe there is some movement toward generalizing it to fire on other types of objects as well.

onkeypress事件适用于所有浏览器中除ALT, CTRL, SHIFT, ESC以外的所有键,其中onkeydown事件适用于所有键。意思是onkeydown事件捕获所有的键。

基本上,这些事件在不同的浏览器类型和版本上表现不同,我创建了一个小jsBin测试,您可以检查控制台以了解这些事件在您的目标环境中的行为,希望这对您有所帮助。http://jsbin.com/zipivadu/10/edit

似乎onkeypress和onkeydown做的是一样的(在上面已经提到的快捷键的小差异中)。

你可以试试这个:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

你会看到onkeypress和onkeydown事件都是在按下键时触发的,而不是在按下键时触发的。

不同之处在于,事件不是一次触发,而是多次触发(只要您按住键)。要意识到这一点,并相应地处理它们。

首先,它们有不同的含义:它们发射:

KeyDown -当一个键被按下 KeyUp -当按下的按钮被释放时,在input/textarea的值被更新之后(其中唯一的一个) KeyPress -在这些和之间并不意味着按键被按下和释放(见下文)。它不仅具有不一致的语义,而且已弃用,因此不应该使用它(另请参阅此摘要)

其次,一些键触发其中一些事件,而不触发其他事件。例如,

KeyPress忽略删除,箭头,PgUp/PgDn, home/end, ctrl, alt, shift等,而KeyDown和KeyUp不(参见下面关于esc的详细信息); 当你在Windows中通过alt+选项卡切换窗口时,只有alt触发的KeyDown,因为窗口切换发生在任何其他事件之前(并且KeyDown选项卡是由系统阻止的,我想,至少在Chrome 71中)。

另外,你应该记住那个事件。keyCode(和event.which)通常对KeyDown和KeyUp有相同的值,但对KeyPress有不同的值。试试我创造的游乐场。顺便说一句,我注意到一个怪癖:在Chrome浏览器中,当我按ctrl+a和输入/文本区域是空的,为按键触发事件。keyCode(和event.which)等于1!(当输入不为空时,它根本不会触发)。

注意:这些天,使用事件。key是最有用的选项,因为它是跨浏览器、操作系统和事件标准化的(afaik)。

最后,还有一些语用学:

For handling arrows, you'll probably need to use onKeyDown: if user holds ↓, KeyDown fires several times (while KeyUp fires only once when they release the button). Also, in some cases you can easily prevent propagation of KeyDown but can't (or can't that easily) prevent propagation of KeyUp (for instance, if you want to submit on enter without adding newline to the text field). Suprisingly, when you hold a key, say in textarea, both KeyPress and KeyDown fire multiple times (Chrome 71), I'd use KeyDown if I need the event that fires multiple times and KeyUp for single key release. KeyDown is usually better for games when you have to provide better responsiveness to their actions. esc is usually processed via KeyDown: KeyPress doesn't fire and KeyUp behaves differently for inputs and textareas in different browsers (mostly due to loss of focus) If you'd like to adjust height of a text area to the content, you probably won't use onKeyDown but rather onKeyPress (PS ok, it's actually better to use onChange for this case).

我在我的项目中使用了这三个,但不幸的是,我可能忘记了一些语用学。(需要注意的是:还有输入和更改事件)