The DOM ForestISSUE #14 of 21

event types · click · input · change · submit

NodetteVSThe Event Bubbler

Nodette saysCommon UI events: click, input, change, submit — each fires at a specific moment.

click on activation; input on every value change (live); change when a field commits (blur for text, immediately for checkboxes/selects); submit on form submission. Pick precisely: input for live search, change for "done editing", and always preventDefault on submit to handle it in JS.

Power-ups you unlock

click = activation
input = live (every change)
change = on commit
submit = form sent (preventDefault to handle in JS)

The Event Bubbler attacks — common mistakes

Using change when you wanted live input
Forgetting preventDefault on submit (page reloads)
Listening on the wrong element for the event

Boss battleWire an input’s live "input" event to mirror its text into a paragraph.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><input id="i" placeholder="type live"><p id="o"></p>
<script>document.getElementById('i').addEventListener('input',e=>document.getElementById('o').textContent=e.target.value);</script></body></html>

▶ Open the interactive comic issue

‹ Event Bubbling · Capturing · Delegation Event Types · Keyboard · Keydown · Keyup ›