Troubles with adding event listeners Javascript

Question

I'm trying to write a super sort Javascript library for myself just to make making canvas games slightly easier.

I'd like to add the event listener for the keypresses from Javascript instead of putting it in as an attribute.

But every time I do it it never works properly and I'm getting really frustrated and wasting all my spares trying to figure it out when I could be doing schoolwork!

Anyway do you think somebody could tell me where I'm going wrong? For this code I'd like for it to alert() with which arrow key was just pressed

Here's index.html

<html>
<head>
<script src="spencersjslibrary.js"></script>
</head>
<body>
<div id="blueblock" style="background:blue; width:100px; height:100px;"></div>
<script>addkeylisten("blueblock")</script>
</body>
</html>

And here's spencersjslibrary.js

//Keyboard stuff for moving and yeah

//Adding event listener
function addkeylisten(ida) {
    alert(ida)
    var ide = document.getElementById(ida)
    ide.addEventListener("keypress", keycheck(event))
}


//checking what key was pressed and assign string value to "lastkey"
function keycheck(event) {
    var bttn = (event.keyCode);
    switch (bttn) {
        case 38:
            lastkey = "up";
            break;
        case 40:
            lastkey = "down";
            break;
        case 37:
            lastkey = "left";
            break;
        case 39:
            lastkey = "right";
            alert(lastkey)
    }
}

So I fixed the addEventListener and got it too work fine with a click event but not my keypress one.

Is that just the element type like would it work with a canvas or body element? And if it was like an image or something per-say would it have to be in focus to hear the keypresses?

closure · Accepted Answer · 2012-12-21 17:41:25Z

3

The syntax ide.addEventListener("keypress",keycheck(event)) is incorrect.

You need to register it as

ide.addEventListener("keypress",keycheck);

You code is actually invoking the handler instead of just registering the function pointer.

answered Dec 21, 2012 at 17:41

closure

7,4521 gold badge25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

closure Over a year ago

Just edited the answer. The reason is: You code is actually invoking the handler instead of just registering the function pointer.

Jim Jones Over a year ago

oooooooOOOoooh Thank You so Much! I gotta stop doing this all in notepad haha

Halcyon · Accepted Answer · 2012-12-21 17:44:52Z

1

@closure's answer it correct.

ide.addEventListener("keypress", keycheck(event)) will always execute keycheck(event) right away. And this is bad because event isn't defined, and your handler wont be called on keypress.

What you're looking for is this:

ide.addEventListener("keypress", function (event) {
    keycheck(event)); // binds to the input ^
});

And that can be reduced to:

ide.addEventListener("keypress", keycheck);

because you can actually reference a function like a variable in JavaScript (it's awesome).

answered Dec 21, 2012 at 17:44

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Collectives™ on Stack Overflow

Troubles with adding event listeners Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related