eventListenerはkeyCodeを読み取ることができません

Question

私はユーザーの入力を受け入れるゲームに取り組んでいます。そうするために、ユーザーが上記のキーを押したときにチェックするイベントリスナーを追加します。私はそれを次のように設定しました：

function gameStart(){ 

    //Generates four random numbers on board 
    for(gameStart_i = 0; gameStart_i < 4; gameStart_i++){ 
     generateNumber(); 
    } 

    document.getElementById("start_button").innerHTML = "Reset Game"; 
    document.getElementById("start_button").setAttribute('onclick', 'reset()'); 
    document.getElementById("start_button").id = 'reset_button'; 

    var board = document.getElementById("game_background"); 


    console.log("1"); 
    board.addEventListener("keydown", inputListen(), false); 
    console.log("1.1"); 
} 

function inputListen(e){ 
    console.log("2"); 
    var code = e.keyCode; 
    switch(code){ 
     case 37: 
      alert("left"); 
      break; 
     case 38: 
      alert("up"); 
      break; 
     case 39: 
      alert("right"); 
      break; 
     case 40: 
      alert("down"); 
      break; 
    } 
} 

これはチュートリアルでの表示と同じようです。しかし、いくつかのチュートリアルは、次のようになります何かをaddEventListenerを行を変更します。私は私のコンソールに見たときに私のために動作するようには思えないしかし

board.addEventListener("keydown", inputListen, false); //removes the() after the function 

。

私は私のコードを実行すると、私のコンソールは私に次のエラーを与える：

1 
    2 
Uncaught TypeError: Cannot read property 'keyCode' of undefined 
    at inputListen (script.js:86) 
    at gameStart (script.js:16) 
    at HTMLButtonElement.onclick (2048Game.html:114) 

は、私は私の関数にパラメータを渡すことはありませんので、それはだと思うが、オンラインチュートリアルのどれもが自分のaddEventListenerでparaementsを渡しませんステートメント。

は、これを行うための適切な方法は、inputListen後()を削除するには確かにある、 アレックス

Answer 1

、ありがとうございました。 ()を使用すると直ちに関数が呼び出され、入力パラメータが指定されていないため前述のようにCannot read property 'keycode' of undefinedが返されます。

また、2つのconsole.log行の間でコンソールにエラーが表示されるはずです。これは、エラーがaddEventListener行から発生していることを示しています。

あなたはあなたが投稿回線を使用して、それを呼び出すことなく、機能を渡したい：

board.addEventListener("keydown", inputListen, false); //removes the() after the function 

このJSFiddleを見てみましょう：

function gameStart(){ 
    console.log("before"); 
    document.getElementById("game_background").addEventListener("keydown", inputListen, false); 
    console.log("after"); 
} 

これはコンソール

にプリントアウトする必要があります

before 
after 

それ以外の場合は​​が検出されます。

また、これをバインドする要素も重要です。要素など<input>はここに何の問題もありませんが、通常の非フォーカス可能な要素が集中するためにtabindex属性を必要と​​に応答します：あなたは一度の要素をクリックする必要があります

<div id="game_background" tabindex="-1"> 
</div> 

それに集中するには、あなたのイベントをキャプチャする必要があります。詳細情報at this answer。

Answer 2

1. はい、()を削除すると、関数呼び出しの結果ではなく、イベントリスナーに関数自体が使用されています。

2. ​​イベントは、ページ内の任意の<div>に送らそうではありません。ユーザーが手動でクリックしてフォーカスを当てないようにする場合は、ウィンドウ自体にイベントリスナーを追加します。

window.addEventListener('keydown', inputListen);