Let's face it. It's not fun to deal with keys in JavaScript. Each browser seems to have an idea of its own how it should work. In this post I'm going to show the way I deal with this madness.
I have split my solution in two parts: shortcuts and mixed events (ie. trigger some handler while both mouse button and some key is pressed). I will use a premade component for the former while I present a custom solution of my own for the latter. My solution is based on RightJS but it ought to be easy to translate the idea to other environments as well.
Shortcuts
I can see this doesn't quite apply to all environments (touch based UIs come to mind) but you get the point. Given they are pretty widely used it often makes sense to provide them in your application.
Fortunately dealing with them is quite easy in JavaScript. There's a nice pre-made library that does the heavy lifting for you. All you need to do is to hook it up as follows:
Note that you could define hotkeys and handlers related to them elsewhere and then just run them through "shortcut". The basic idea applies, though.
Note the "disable_in_input" option. I highly recommend setting it on in case your application happens to have some sort of input fields in it.
Mixed Events
The above solution won't cover cases in which we need to check some keys while the user does something else (ie. is pressing a mouse button). To deal with this I use a simple keyboard abstraction layer like this:
All the layer does is just to keep track of keys that are being pressed at a given time. It provides simple means (keyboard.isPressed) to check this of course.
Now that you have this information all you have to do is just check while doing the master op (ie. move mouse). Here's a small example of how you might use it:
