Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 292
user2138152 Avatar asked Dec 07 '22 07:12

user2138152


2 Answers

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
like image 140
Ian Avatar answered Dec 29 '22 11:12

Ian


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

like image 23
Kevin Boucher Avatar answered Dec 29 '22 11:12

Kevin Boucher