eventListener kann keyCode nicht lesen

Question

Also arbeite ich an einem Spiel, das Benutzereingaben akzeptiert (nach oben, nach links, nach rechts weisende Pfeiltasten). Um dies zu tun, werde ich einen Ereignis-Listener hinzufügen, der überprüft, wenn der Benutzer die Tasten drückt. Ich habe es auf die folgende Weise eingerichtet:

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

Dies scheint im Einklang mit wie Tutorials zeigen es. Um jedoch die addEventListener Linie mit etwas einige Tutorials zu ändern, würde wie folgt aussehen:

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

jedoch, die nicht für mich zu arbeiten scheint, wenn ich in meiner Konsole aussehen.

Wenn ich meinen Code meine Konsole ausführen, gibt mir die folgende Fehlermeldung:

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) 

Ich denke, es ist, weil ich, keine Parameter meiner Funktion übergeben, aber keiner der Online-Tutorials passieren paraements in ihren addEventListener Erklärung.

Danke, Alex

Answer 1

der richtige Weg, dies in der Tat zu tun ist, um die () nach inputListen zu entfernen. Mit der () ruft sofort die Funktion auf, die Ihnen dann Cannot read property 'keycode' of undefined vorgibt, da keine Eingangsparameter angegeben wurden.

Sie sollten auch den Fehler in der Konsole zwischen den beiden console.log Zeilen erhalten haben, die den Fehler aus der Zeile beweist.

Sie möchten die Funktion zu übergeben, ohne sie den Aufruf der Zeile Sie auf dem Laufenden:

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

einen Blick auf dieses JSFiddle Nehmen:

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

Dies sollte

, um die Konsole aus

before 
after 

Und dann nicht hing sonst bis es eine keydown erkennt.

Es spielt auch eine Rolle, an welche Art von Element Sie dies binden. Ein Element wie <input> wird hier keine Probleme haben, aber normal nicht-aktivierbaren Elemente das tabindex Attribut, um eine keydown werden müssen konzentriert und darauf zu reagieren:

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

Sie müssen das Element einmal klicken um sich darauf zu konzentrieren, sollten Ihre Ereignisse erfasst werden. Mehr Infos at this answer.

Answer 2

1. Ja Drop die (), können Sie die Funktion selbst zu dem Ereignis-Listener verwenden, nicht das Ergebnis des Funktionsaufrufes.

2. Die keydown Ereignis ist wahrscheinlich nicht auf eine beliebige <div> in der Seite gesendet.Fügen Sie den Ereignis-Listener stattdessen dem Fenster selbst hinzu, wenn der Benutzer nicht manuell darauf klicken soll, um sich darauf zu konzentrieren.

window.addEventListener('keydown', inputListen);