我在想，当按键时，onkeypress属性会被反复触发。这通常是正确的，但当我尝试添加具有此属性的新段落时，有时会失败。你能解释一下为什么第二个代码不能像第一个代码那样正常工作吗？
这是第一个测试按键属性的代码：
<!DOCTYPE html>
<html>
<head>
<title>Keypress</title>
</head>
<body>
<input type="text" maxlength="1" onkeypress="keypress_example()">
<div id="message">
</div>
<script>
function keypress_example(){
var newPar = document.createElement('p');
newPar.textContent= "Key is being pressed";
document.getElementById("message").appendChild(newPar);
}
</script>
</body>
</html>
它按预期工作。当我添加onkeydown属性时，问题就开始了：
<!DOCTYPE html>
<html>
<head>
<title>Keypress</title>
</head>
<body>
<input type="text" maxlength="1" onkeypress="keypress_example()" onkeydown="keydown_example()">
<div id="message">
</div>
<script>
function keydown_example(){
document.getElementById("message").innerHTML = "A key was pressed";
}
function keypress_example(){
var newPar = document.createElement('p');
newPar.textContent= "A key is being pressed";
document.getElementById("message").appendChild(newPar);
}
</script>
</body>
</html>
如果您首先对此代码执行相同操作，则keydown事件会被触发一次，之后keypress事件会被触发器一次，但不会一次又一次地被触发。这是什么原因？
首先，您需要关闭您的输入标记，以便您的HTML有效：
<input type="text" maxlength="1" onkeypress="keypress_example()" onkeydown="keydown_example()" />
接下来，你到底想完成什么？您的代码有效。两个事件都会触发-并且两个事件会更新"message"div。但是，由于它们都会随着每次击键而触发-并且都会更新"message"div，所以只要您所击的键会触发两个事件，它就会始终包含"A key was pressed"，然后是一段文字"A key is pressed"。有些事件不会，比如Backspace或Spacebar。
keypress和keydown在用户按住键时都会重复。在怪癖模式上阅读更多
如果您将新的段落元素附加到不同的元素，则可以获得所需的行为。代码中发生的情况是，keydown处理程序正在替换所有现有的段落元素，然后按键会添加一个。下面的代码按预期工作。
<!DOCTYPE html>
<html>
<head>
<title>Keypress</title>
</head>
<body>
<input type="text" maxlength="1" onkeypress="keypress_example()" onkeydown="keydown_example()">
<div id="message"> </div>
<div id="boxes"> </div>
<script>
function keydown_example(){
document.getElementById("message").innerHTML = "A key was pressed";
}
function keypress_example(){
var newPar = document.createElement("p");
newPar.innerHTML= "A key is being pressed";
document.getElementById("boxes").appendChild(newPar);
}
</script>
</body>
</html>