Exhibit #0: Handling Keyboard Events

Demo

Press a key and I'll tell you what's going on.

What We Did

• When the browser is in focus and you do something with the keyboard, the browser generates an event that can be processed by your code.
• We are mainly interested in two types of events:
  • A keydown event is generated when you press a key on the keyboard.
  • A keyup event is generated when you release a pressed key.
• We can use jQuery to assign event handlers to these events:
  • $(document).keydown(<handler>)
  • $(document).keyup(<handler>)
  The assigned handlers will respond to all keyboard events on the page. It is also possible to assign handlers to specific elements (e.g., WebGL canvases), but this should not be necessary for our purposes.
• A keyboard event handler is a function with one argument, which is the KeyboardEvent object.
• To prevent the browser's default handling of key presses (e.g., scrolling on space bar presses), return false.
• You can see the full documentation of KeyboardEvent here.
• Here are some useful fields of the KeyboardEvent object:

  Name	Type	Meaning
  key	String	The string representing the key value of the key pressed. For examples, 'a', 'b', 'Alt', 'ArrowLeft', etc.
  ctrlKey	Boolean	Whether the Ctrl key is pressed when the event was fired.
  altKey	Boolean	Whether the Alt key is pressed when the event was fired.
  shiftKey	Boolean	Whether the Shift key is pressed when the event was fired.
  metaKey	Boolean	Whether the Meta key (Mac) is pressed when the event was fired.