JavaScript equivalent of jQuery's keyup() and keydown()

Question

I have seen this link on stackoverflow: $(document).ready equivalent without jQuery

In my context I am using

$(document).keydown(Keypress);
$(document).keyup(Keyoff);

for the functions

 function Keypress(evt) {
     if (evt.keyCode == 39) rightpress = true;
     else if (evt.keyCode == 37) leftpress = true;
 }

 //unset
 function Keyoff(evt) {
     if (evt.keyCode == 39) rightpress = false;
     else if (evt.keyCode == 37) leftpress = false;
 }

Is there a javascript equivalent? Like window.onload?

score 11 · Answer 1 · edited May 23 '17 at 11:53

11

In order to use some more "equivalent" to jQuery's on method, you shouldn't use the onkeydown and onkeyup handlers. Use addEventListener or attachEvent. attachEvent is specifically for older versions of IE, so addEventListener is the standard and is used by all other browsers. But you should always include support, so you can make a function to handle it all. Try:

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

addEvent(window, "keydown", Keypress);
addEvent(window, "keyup", Keyoff);

This allows you to add multiple handlers, just like jQuery's on method does. Setting the .onkeydown and .onkeyup properties allows only one handler (unless you want to overwrite another). There's a lot more that the addEvent function could do, to make a standard, cross-browser event handling (an example is what happens based on the return type of the callback). It's really not important for now - if you want complete cross browser compatibility, that's what jQuery's for :)

References:

addEventListener: https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener
addEventListener vs onclick

edited May 23 '17 at 11:53

Community

1
1

answered May 11 '13 at 04:27

Ian

46,701
13
94
107

Why not use `onkeydown` and `onkeyup`? Only because they are less like the "equivalent" of jQuery's `on` method? Aren't they a perfectly valid alternative unless you want to add more than 1 event handler (which doesn't seem to be the case with OP)? Or is there another reason? Just wanting to learn here, saying "you shouldn't use" makes it sound like a bad thing to do.. why is that? I can see how it is less flexible, but that doesn't make it a bad thing if flexibility is not really a requirement. – Mathijs Flietstra May 11 '13 at 04:33
@user1846192 That's exactly why. You asked for the "equivalent". jQuery's `on` method allows for multiple handlers to be bound or unbound for a specific event. Setting the `onevent` properties is just as widely supported in all browsers - obviously there is some inconsistency for old IE with `addEventListener`. But you're right - in the OP's example, they only want to bind one event to each. It's just that, if any other code wants to bind another handler to the same event, it won't be "possible" using the `onevent` stuff. – Ian May 11 '13 at 04:42
@user1846192 I guess my "you shouldn't use" really is just my way of saying "For your question of wanting an equivalent of jQuery's `on`, you shouldn't use the other answers that suggest `onevent` because they don't do what `on` does" – Ian May 11 '13 at 04:44
Ok I get it :) You're addressing the "equivalent" part of the question, and now that I'm just reading the question again, I realise that there isn't really another part to it. Thanks. – Mathijs Flietstra May 11 '13 at 04:48
@user1846192 I guess I should've been more clear about that. I updated some of my answer to hopefully say that better. Thanks for pointing it out out! And I added a link that might help explain more differences between `onevent` and `addEventListener` – Ian May 11 '13 at 05:01

score 4 · Answer 2 · answered May 11 '13 at 04:08

4

window.onkeydown = Keypress;
window.onkeyup = Keyoff;

https://developer.mozilla.org/en-US/docs/DOM/window.onkeyup

https://developer.mozilla.org/en-US/docs/DOM/window.onkeydown

answered May 11 '13 at 04:08

Kevin Boucher

14,990
3
40
54

I think the complication you describe in the other example was due to the difference between the window's `load` event and jQuery's document `'ready'` event. – Kevin Boucher May 11 '13 at 04:11

JavaScript equivalent of jQuery's keyup() and keydown()

2 Answers2

Linked