意外的 Javascript onkeydown 事件和 document.write

Question

我正在学习 Javascript 并且在测试某些功能时，我发现了一些问题。这是我的代码：

    <script>
        function onCreate() {
            var body = document.getElementsByTagName('body')[0]; 
            body.focus(); 
            body.onkeydown = function(e) {
                if (e.keyCode == 32) {
                    alert(1); 
                    sayHey(); 
                }
            }
        }

        function sayHey() {
            document.write("Hey "); 
            document.write("May"); 
        }, 30); 
    </script>
</head>
<body onload="onCreate()">
</body>

您可能会尝试，当我不包含使用 setInterval 的 sayHello() 函数时，onkeydown 事件可以完美运行。当包含 sayHello() 时，当我单击 space 栏时，会按预期创建 "Hey May"。但是，当我再次单击 space 栏时，没有警告消息也没有新的 "Hey May" 出现。 onkeydown() 函数似乎不再起作用了。为什么会这样？

此外，当我将 document.write(brabrabra) 更改为以下内容时，它起作用了。

var newParagraph = document.createElement('p'); 
var text = "Hey May"; 
var textNode = document.createTextNode(text); 
newParagraph.appendChild(textNode); 
body.appendChild(newParagraph);

为什么会这样？有人可以向我解释吗？非常感谢。

Answer 1

文档解析后，当前文档关闭，使用 document.write() 将清除当前文档并打开一个新的空白文档，从而清除您之前拥有的任何事件处理程序或内容。

因此，在您的特定示例中，第一次按键会触发您的事件处理程序。这显示 alert(1) 然后调用 sayHey() 调用 document.write() 清除当前文档，因此您的事件处理程序不再存在。因此，对于第二次按下 space 条，没有任何事件处理程序，也没有任何反应。

因此，如果您想在文档加载后向其添加内容，那么您应该添加类似 document.createElement() 和 .appendChild() 的内容，而不是 document.write()。

意外的 Javascript onkeydown 事件和 document.write

Unexpected Javascript onkeydown event and document.write

javascript

onkeydown

document.write