javascript 中 keyup 和 keydown 的工作有什么区别？

Question

我一直在学习 javascript 中的按键事件，想知道为什么我在 keyup 和 keydown 中得到不同的结果。例如。如果我分配一个带有 id 的输入并通过它传递一个 addEventListner[reffer code] 然后如果我在 keydown 事件中键入“1234”我得到输出为“123”并且这个问题不会发生在 keyup 事件中。

简而言之，我只是想问一下为什么万一 keydown 没有字符（在输入中输入）不等于没有。输出中显示的字符。 keyup 不会出现这种情况，我应该使用哪一个？

<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <input type="text" name="" id="in" placeholder="enter a value" style="border: solid; margin: 15px; padding: 5px">
<div style="border: 5px solid black; margin:10px; width:30vw; height: 15vh">
      Keydown result: <div id="keydown"></div>
</div>
<div style="border: 5px solid black; margin:10px; width:30vw; height: 15vh">
       Keyup result:<div id="keyup"></div>
</div>
</body>
</html>

<script>
document.getElementById('in').addEventListener('keydown', runevent);

function runevent(e){

   document.getElementById('keydown').innerText = e.target.value;

}

document.getElementById('in').addEventListener('keyup', runevent1);

function runevent1(e){

   document.getElementById('keyup').innerText = e.target.value;

}


</script>

Answer 1

in short i just wanted to ask that why in case of keydown no of character(typed in input) is not equal to no. of character displayed in output. this doesnt happens with keyup and which one should i use?

如果您对字符感兴趣，如果您想处理事件生成的字符，请使用keypress，或者如果您希望使用input只想要最新的字段值。

keydown 在字符添加到字段之前触发，这就是为什么您在键入 1234 后看不到 4 的原因。（如果您阻止 keydown 的默认操作，则永远不会添加该字符。）
beforeinput 在输入发生变化之前触发（例如，如果变化的原因是按键，则在添加字符之前）。
keypress 在添加字符之前也会触发。
注意： keypress 已弃用，请参阅 beforeinput 和 keydown。
input 在添加字符后触发。
keyup 在添加字符后触发。

这可能有助于您查看顺序：

const input = document.getElementById("field");
const output = document.getElementById("output");

function handleEvent(e) {
    output.insertAdjacentHTML("beforeend",
       "<pre>" + e.type + ": " + input.value + "</pre>"
    );
}

input.addEventListener("keydown", handleEvent);
input.addEventListener("keyup", handleEvent);
input.addEventListener("keypress", handleEvent);
input.addEventListener("input", handleEvent);

#output pre {
    margin-top: 0;
    margin-bottom: 0;
}

<input type="text" id="field">
<div id="output"></div>

Answer 2

当用户释放一个键时触发KeyUp事件。

当用户按下一个键时，KeyDown事件被触发。

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.

In order to understand the difference between keydown and keypress, it is useful to understand the difference between a "character" and a "key". A "key" is a physical button on the computer's keyboard while a "character" is a symbol typed by pressing a button. In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers

javascript 中 keyup 和 keydown 的工作有什么区别？

what is difference between working of keyup and keydown in javascript?

javascript

addeventlistener

keydown

keyup

typescript