onKeyPress与onKeyUp和onKeyDown的区别

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

我观察到keyup和keydown之间的区别是：

如果我们为keydown事件附加一个事件处理程序并记录输入框的值，即(e.target.value)，它返回的是keydown事件之前的值。

但是如果我们为keyup事件附加一个事件处理程序并记录输入框的值，它返回的是包括被按下的键在内的最新值。

让我们通过示例来理解

<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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" />