这三件事有什么不同?在谷歌上我发现:
当用户按下一个键时,onKeyDown事件被触发。 当用户释放密钥时触发onKeyUp事件。 当用户按下并释放一个键时触发onKeyPress事件 (onKeyDown紧接着onKeyUp)。
我理解前两个,但不是onKeyPress相同的onKeyUp?是否有可能释放一个键(onKeyUp)而不按它(onKeyDown)?
这有点混乱,有人能帮我解释一下吗?
这三件事有什么不同?在谷歌上我发现:
当用户按下一个键时,onKeyDown事件被触发。 当用户释放密钥时触发onKeyUp事件。 当用户按下并释放一个键时触发onKeyPress事件 (onKeyDown紧接着onKeyUp)。
我理解前两个,但不是onKeyPress相同的onKeyUp?是否有可能释放一个键(onKeyUp)而不按它(onKeyDown)?
这有点混乱,有人能帮我解释一下吗?
当前回答
我观察到的keyup和keydown之间的区别是
如果我们为keydown事件附加一个事件处理程序,并记录输入框的值,即 (e.target.value)它返回keydown事件之前的值
但是如果我们为keyup事件附加一个事件处理程序并记录输入框的值 它返回最新的值,包括被按下的键
让我们用例子来理解
// the latest keypressed is not shown in e.target.value
// when keydown event handler is executed
// since until the keyup is not triggered
// the input box will not have that character in its value
const searchCitiesEleKeyDown = document.querySelector("#searchCities");
searchCitiesEleKeyDown.addEventListener("keydown", (e) => {
console.log(e.target.value);
});
// but in case of keyup event the e.target.value prints
// the text box content with the latest character pressed
// since as soon as the keyup event triggers
// the input box will have that character pressed in its value
const searchCitiesEleKeyUp = document.querySelector("#searchCities");
searchCitiesEleKeyUp.addEventListener("keyup", (e) => {
console.log(e.target.value);
});
<input type="text" id="searchCities" />
CodeSandbox链接 https://codesandbox.io/s/keydown-vs-keyup-wpj33m
其他回答
只是想分享一个好奇心:
当使用onkeydown事件来激活一个JS方法时,该事件的charcode与你使用onkeypress得到的不一样!
例如,当使用onkeypress时,numpad键将返回与字母键上方的数字键相同的字符代码,但当使用onkeydown时则不是!
我花了相当多的时间来弄清楚为什么我的脚本在使用onkeydown时检查某些字符码失败!
演示:https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK
是的。我知道方法的定义是不同的。但非常令人困惑的是,在这两个方法中,事件的结果是使用event. keycode ..但是它们不会返回相同的值。不是一个非常声明性的实现。
我观察到的keyup和keydown之间的区别是
如果我们为keydown事件附加一个事件处理程序,并记录输入框的值,即 (e.target.value)它返回keydown事件之前的值
但是如果我们为keyup事件附加一个事件处理程序并记录输入框的值 它返回最新的值,包括被按下的键
让我们用例子来理解
// the latest keypressed is not shown in e.target.value
// when keydown event handler is executed
// since until the keyup is not triggered
// the input box will not have that character in its value
const searchCitiesEleKeyDown = document.querySelector("#searchCities");
searchCitiesEleKeyDown.addEventListener("keydown", (e) => {
console.log(e.target.value);
});
// but in case of keyup event the e.target.value prints
// the text box content with the latest character pressed
// since as soon as the keyup event triggers
// the input box will have that character pressed in its value
const searchCitiesEleKeyUp = document.querySelector("#searchCities");
searchCitiesEleKeyUp.addEventListener("keyup", (e) => {
console.log(e.target.value);
});
<input type="text" id="searchCities" />
CodeSandbox链接 https://codesandbox.io/s/keydown-vs-keyup-wpj33m
点击这里查看这个答案中最初使用的存档链接。
从这个链接:
理论上,onKeyDown和onKeyUp事件表示正在按下或释放的键,而onKeyPress事件表示正在键入的字符。该理论在所有浏览器中的实现并不相同。
基本上,这些事件在不同的浏览器类型和版本上表现不同,我创建了一个小jsBin测试,您可以检查控制台以了解这些事件在您的目标环境中的行为,希望这对您有所帮助。http://jsbin.com/zipivadu/10/edit
当键按下时,Onkeydown被触发(就像在快捷键;例如,在Ctrl+A中,按下Ctrl键。
Onkeyup在按键释放时被触发(包括modifier/etc按键)
Onkeypress被触发为onkeydown和onkeyup的组合,或者取决于键盘重复(当onkeyup没有被触发时)。(我还没有测试过这种重复行为。如果要测试,请添加注释!)
textInput(仅webkit)在输入一些文本时被触发(例如,Shift+A将输入大写的“A”,但Ctrl+A将选择文本而不输入任何文本输入。在这种情况下,所有其他事件被触发)