意外的 Javascript onkeydown 事件和 document.write



我正在学习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>

正如您可能尝试的那样,当我不包含sayHello((函数时,onkeydown事件可以完美运行,该函数使用setInterval。当包含sayHello((时,当我单击空格键时,会创建"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); 

为什么会这样呢?有人可以向我解释一下吗?多谢。

分析完文档后,将关闭当前文档,任何使用 document.write() 都将清除当前文档并打开新的空白文档,从而清除以前拥有的任何事件处理程序或内容。

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

因此,如果要在加载文档后向文档添加内容

,则应使用类似以下内容添加内容 document.createElement().appendChild() ,而不是 document.write()

相关内容

  • 没有找到相关文章

最新更新