Javascriptでこのコードを理解する

イベントが発生するたびに、つまり、ダウンキーが押されたときに、変数counterが次のコードでインクリメントされることが期待されます。コードは1回だけインクリメントし、下キーを押しても何も起こりません。Javascriptでこのコードを理解する

なぜそれが起こっているのか説明できますか？

また、イベントが発生したときにFirefoxのタブにはローディングサークルが表示されますが、それはなぜですか？また、イベントリスナーの有効期間が存在しますか？つまり、イベントリスナーに達すると期限切れになりますか？あなたのコードは一度だけ実行され、あなたのHTMLコードは、その後一つだけの文字「1」が含まれていますので

<html> 
 
<head> 
 
<body> 
 

 
<script> 
 
var counter=0; 
 
addEventListener("keydown",function(){ 
 
counter++; 
 
document.write(counter); 
 
}); 
 
</script> 
 
</body> 
 
</html>

出典

2016-09-14 OAH

の可能性のある重複した[私はdocument.writeを生き残るJSのイベントリスナーを作成するにはどうすればよいです？]（http://stackoverflow.com/questions/8672833/how-can-i- –

クイックヒント： 'document.body.innerHTML = counter' – slebetman

にdocument.write（）は、実際にページのすべての現在の内容を上書きします。つまり、DOMが破棄され、実行するJavaScriptコードがなくなります。

あなたがしたいことは、すべての文書を上書きするのではなく、特定の要素の内容を更新することです。

出典

2016-09-14 00:17:07

タブの読み込みシンボルはどうなっていますか？その上の任意のアイデア？ – OAH

確かに、Firefox固有のようです。私の野生の推測では、関数は破棄され、イベントハンドラがハングするので、関数が返ることはありません。 –

'document.close（）;'でドキュメントが閉じられるまで、読み込みアイコンを表示し続けます。 – Xufox

ルーカスは問題を正しく説明していますが、次の変更例ではDOMに上書きするのではなく、タグに書き込むようにイベントリスナーに書き込んで変更することが含まれています（<）。

<html> 
 
<head> 
 
<body> 
 
<script> 
 
    var counter=0; 
 
    addEventListener("keydown",function(){ 
 
    counter++; 
 
    document.getElementById("target").innerHTML = counter; 
 
    }); 
 
</script> 
 
<div id="target"></div> 
 
</body> 
 
</html>

出典

2016-09-14 00:32:07

Javascriptでこのコードを理解する

答えて

関連する問題