Events & Interactivity

Code

js/shortcuts.js — one listener for every key

In the code column — js/shortcuts.js. It's a perfect delegation example: one listener on document serves every keyboard shortcut. We don't add a listener per key — we let events bubble up to document and decide there what to do.

How it works: register('g', () => navigate('/gallery')) remembers a key; initShortcuts() listens for keydown on document and, on a match, calls the handler.

Two decisions matter here (both real UX questions):

Don't steal keys while the user is typing. isTyping(e.target) checks whether focus is in an input field. If so — we skip (so / in the search box types a slash instead of opening search). The exception is Escape, which should always "get out".
Don't fight the browser. If Ctrl/Cmd/Alt is held — skip, so we don't hijack Ctrl+F, Cmd+R and friends.

document.addEventListener('keydown', (e) => {
  if (isTyping(e.target)) { if (e.key === 'Escape') e.target.blur(); return; }
  if (e.metaKey || e.ctrlKey || e.altKey) return;
  const entry = shortcuts.get(e.key.toLowerCase());
  if (entry) { e.preventDefault(); entry.handler(e); }
});

Notice e.preventDefault() — when the key is ours, we stop the browser's default so that, say, / doesn't open the browser's own find bar.

Tip. This pattern — "one listener, a map of actions" — recurs everywhere: keyboard, list clicks, menus. Instead of adding N listeners (and cleaning them up), you add one on the parent. Less code, fewer memory leaks, and it works for content added dynamically too.

shortcuts.js CREATE

Create this file in js/

// Keyboard shortcuts.
//
// Two things worth learning here:
//   1. A single listener on `document` handles every shortcut. You do NOT
//      add a listener per key — that's what event bubbling is for.
//   2. You must NOT hijack keys while the user is typing in a field.
//      Pressing "/" inside a textarea should type a slash, not open search.

const shortcuts = new Map();

/** register('/', () => searchInput.focus()) */
export function register(key, handler, description = '') {
  shortcuts.set(key.toLowerCase(), { handler, description });
}

export function getShortcuts() {
  return [...shortcuts.entries()].map(([key, { description }]) => ({ key, description }));
}

function isTyping(target) {
  const tag = target.tagName;
  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;
}

export function initShortcuts() {
  document.addEventListener('keydown', (e) => {
    // Never steal keys from a form field...
    if (isTyping(e.target)) {
      // ...except Escape, which should always blur/close.
      if (e.key === 'Escape') e.target.blur();
      return;
    }

    // Don't fight the browser's own shortcuts (Ctrl+F, Cmd+R…)
    if (e.metaKey || e.ctrlKey || e.altKey) return;

    const entry = shortcuts.get(e.key.toLowerCase());
    if (entry) {
      e.preventDefault();
      entry.handler(e);
    }
  });
}