javascriptのaddEventListenerが何もしないのはなぜですか？

Question

私は矢印キーとJavascriptイベントリスナーを使って青いボックスの内側にオレンジ色のボックスを動かすスクリプトを書こうとしています。ページを実行すると、何も起こりません。私はコンソールで掘り下げようとしましたが、出力がまったく得られません。私は何か小さいものを見逃していると確信していますが、私の人生はそれを理解することができません。どんな提案も素晴らしいだろう！

var orange = document.getElementById("orange"); 
 
orange.addEventListener("onkeydown", move, false); 
 
function move(e); 
 
    \t \t \t 
 
e = e || window.event; 
 
    
 
    if(e.keyCode == '38'){ //up 
 
    \t if(parseInt(orange.style.top) > '0'){ 
 
    \t \t orange.style.top = parseInt(orange.style.top) - 5; 
 
    \t } 
 
    } else if (e.keyCode == '40'){ //down 
 
    \t if(parseInt(orange.style.top) < '425'){ 
 
    \t \t orange.style.top = parseInt(orange.style.top) + 5; 
 
    \t } 
 
    } else if (e.keyCode == '37'){ //left 
 
    \t if(parseInt(orange.style.top) > '0'){ 
 
    \t \t orange.style.left = parseInt(orange.style.left) - 5; 
 
    \t } 
 
    } else if (e.keyCode == '39') { //right 
 
    \t if(parseInt(orange.style.left) < '425') { 
 
    \t \t orange.style.left = parseInt(orange.style.left) + 5; 
 
    \t }  
 
    } 
 
} 
 
    \t

#blue{ 
 
    background-color: blue; 
 
    position: relative; 
 
    height: 500px; 
 
    width: 500px 
 
} 
 
#orange{ 
 
    background-color: orange; 
 
    position: absolute; 
 
    width: 75px; 
 
    height: 75px; 
 
};

<div id="blue"> 
 
    <div id ="orange" style="left: 30px; top:30px;"></div> 
 
</div> 
 

Answer 1

あなたはカップルの問題を抱えて：

1）を使用すると、オブジェクトに直接追加されていない限り、イベントは（​​ないonkeydown次のとおりです。（例：orange.onkeydown ）

2）トップは整数ではなくピクセル単位で測定されます。トップの変更に+ 'px'を追加する必要があります。orange.style.top = parseInt(orange.style.top) + 5 + 'px'

その他の注意事項：

• それがフォーカスを持っているだろうと窓にイベントリスナーを持っている良い仕事かもしれません、しかしIDKの - それをテストしていませんでした。
• e.keyCode
は@bmceldowneyが述べたように、あなたの関数宣言に構文エラーを持っ数ではなく、文字列
• であなたのコードのバージョンの作業

：によってthis documentation pageに述べたようにhttps://jsfiddle.net/kkhkL065/

Answer 2

あなたが正しくmove関数を宣言していないので、あなたは、あなたのコンソールで構文エラーを取得する必要があります。

function move(e); 

    e = e || window.event; 

は次のようになります。

function move(e) { 

     e = e || window.event; 

Answer 3

をMozilla、 keydownイベントのターゲット（はあなたのコードに誤って書かれているようにではありません）は

です

集束要素キーイベントを処理し、ルート要素は全く適し 入力要素は、したがって、基本的にのみ入力（<input>及び<textarea>）又はルート要素（文書またはウィンドウ）を処理することができる

集束ない場合行事。

は、このようにコードを変更します。

var orange = document.getElementById("orange"); 
var move = function(e){ 
    orange.classList.add("red"); 
} 
window.addEventListener("keydown", move, false); 

ここJSFiddleへのリンクです：https://jsfiddle.net/nbj0Lujw/

はそれが役に立てば幸い:)