Input HarborISSUE #44 of 46

event reference · every browser event

FormaVSCaptain Invalid Input

Forma saysThe browser fires hundreds of events — click, input, keydown, submit, load, scroll — and your JS listens for the ones it needs.

Every interaction is an event. The reference groups them: mouse (click, mousemove), keyboard (keydown, keyup), form (input, change, submit), focus (focus, blur), pointer/touch, and lifecycle (load, scroll, resize).

You attach handlers with addEventListener(type, fn). Picking the right event matters: input fires on every keystroke, change only when the value commits; pointerdown beats click for instant feedback. Knowing the catalog is half of interactivity.

Power-ups you unlock

Events: mouse · keyboard · form · focus · pointer · lifecycle
addEventListener(type, handler) attaches a listener
input (every keystroke) vs change (on commit)
Choosing the right event is half the battle

Captain Invalid Input attacks — common mistakes

Using change when you wanted live input (or vice versa)
Adding listeners in a loop without ever removing them
Relying on click for drag-like interactions (use pointer events)

Boss battleBuild an event logger: print the type of every keydown, input, and click on a box.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px">
  <input id="i" placeholder="type / click here" style="background:#0c081a;color:#e6e0ff;border:1px solid #2a1d4a;padding:8px">
  <pre id="log" style="margin-top:10px;height:140px;overflow:auto"></pre>
  <script>
    const log = document.getElementById('log'), i = document.getElementById('i');
    ['keydown','input','click','focus','blur'].forEach(t =>
      i.addEventListener(t, e => {
        log.textContent = '› ' + t + (e.key ? ' ['+e.key+']' : '') + '\n' + log.textContent;
      }));
  </script>
</body></html>

▶ Open the interactive comic issue

‹ Attribute Reference · Global Attributes Character Entities · The Full Table ›