意外的Javascript onkeydown事件和document.write

我正在學習Javascript，當我測試某些功能時，發現一些問題。這裏是我的代碼：意外的Javascript onkeydown事件和document.write

<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>

正如你可以試試，onKeyDown事件完美的作品時，我不包括的sayHello（）函數，它使用的setInterval的。當包含sayHello（）時，當我點擊空格鍵時，就會按照預期創建「Hey May」。但是，當我再次單擊空格鍵時，沒有提示消息，也沒有提出新的「嗨，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);

爲什麼會這樣？有人可以向我解釋嗎？非常感謝。

來源

2015-10-09 CHANist

解析文檔後，當前文檔關閉，任何使用document.write()將清除當前文檔並打開一個新的空白文檔，從而清除您以前擁有的任何事件處理程序或內容。

因此，在您的具體示例中，第一次按鍵會觸發您的事件處理程序。它顯示alert(1)，然後調用sayHey()，它調用document.write()它清除當前文檔，因此您的事件處理程序不再存在。所以，第二次按空格鍵時沒有事件處理程序，也沒有任何反應。

因此，如果您想在文檔加載後向文檔添加內容，則應該添加類似document.createElement()和.appendChild()而不是document.write()的內容。

來源

2015-10-09 02:34:19 jfriend00

非常感謝 – CHANist

只要記住一個問題......如果'document.write（）'清除當前文檔並打開一個新的空白文檔。爲什麼連續的'document.write（）'工作...爲什麼不document.write（「May」）覆蓋document.write（「嘿」）？ – CHANist

@CHANist - 因爲一旦你打開了一個新文檔，它仍然是開放的，所以你可以寫更多。事實上，文檔在最初完成分析時會關閉，這會導致您的問題。 – jfriend00

意外的Javascript onkeydown事件和document.write

回答

相關問題