这三件事有什么不同?在谷歌上我发现:
当用户按下一个键时,onKeyDown事件被触发。 当用户释放密钥时触发onKeyUp事件。 当用户按下并释放一个键时触发onKeyPress事件 (onKeyDown紧接着onKeyUp)。
我理解前两个,但不是onKeyPress相同的onKeyUp?是否有可能释放一个键(onKeyUp)而不按它(onKeyDown)?
这有点混乱,有人能帮我解释一下吗?
这三件事有什么不同?在谷歌上我发现:
当用户按下一个键时,onKeyDown事件被触发。 当用户释放密钥时触发onKeyUp事件。 当用户按下并释放一个键时触发onKeyPress事件 (onKeyDown紧接着onKeyUp)。
我理解前两个,但不是onKeyPress相同的onKeyUp?是否有可能释放一个键(onKeyUp)而不按它(onKeyDown)?
这有点混乱,有人能帮我解释一下吗?
当前回答
基本上,这些事件在不同的浏览器类型和版本上表现不同,我创建了一个小jsBin测试,您可以检查控制台以了解这些事件在您的目标环境中的行为,希望这对您有所帮助。http://jsbin.com/zipivadu/10/edit
其他回答
答:更新
KeyDown
当你按住键时,会触发多次。 触发元键。
键盘按键
当你按住键时,会触发多次。 不触发元键。
KeyUp
当你释放钥匙时,最后会触发一次。 触发元键。
这是addEventListener和jQuery中的行为。
https://jsbin.com/vebaholamu/1/edit?js,console,output <——试试例子
(答案已编辑正确的回答,截图和示例)
这里的大多数答案更多地集中在理论而不是实际问题上,至少在Firefox中(在43中测试),keyup和keypress在输入字段值方面有一些很大的区别。
如果用户在空的输入元素中输入1:
input元素的值将是按键处理程序中的空字符串(旧值) 在keyup处理程序中,input元素的值将是1(新值)。
如果您所做的工作依赖于知道输入后的新值,而不是当前值,例如内联验证或自动制表符,那么这一点至关重要。
场景:
用户在输入元素中输入12345。 用户选择文本12345。 用户输入字母A。
当输入字母A后触发按键事件时,文本框现在只包含字母A。
But:
Field.val()是12345。 美元Field.val()。长度为5 用户选择是一个空字符串(防止您通过覆盖选择来确定删除了什么)。
这样看来,浏览器(Firefox 43)擦除用户的选择,然后触发按键事件,然后更新字段内容,然后触发keyup。
基本上,这些事件在不同的浏览器类型和版本上表现不同,我创建了一个小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事件都是在按下键时触发的,而不是在按下键时触发的。
不同之处在于,事件不是一次触发,而是多次触发(只要您按住键)。要意识到这一点,并相应地处理它们。
onkeypress事件适用于所有浏览器中除ALT, CTRL, SHIFT, ESC以外的所有键,其中onkeydown事件适用于所有键。意思是onkeydown事件捕获所有的键。