Events and forms

Handle events with intent

Use x-on and modifiers for a reason instead of attaching broad listeners everywhere.

9 minute lesson

~~~

Before choosing a tool or writing more code, make the requirement concrete. Escape closes the editor, click outside dismisses it, and the form—not an arbitrary button—owns submission.

Event modifiers encode propagation, default behavior, keyboard filters, timing, and listener targets. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.

A common failure is to add prevent and stop to every handler until unexpected behavior disappears. The happy path may still work, which makes the mistake easy to miss. start from the browser event flow and add only the modifier required by the interaction contract. Keep the first version small enough that every important input and output remains visible.

This supports the module goal: Build a keyboard-usable issue editor whose state, validation, and submission lifecycle remain explicit. Capture the request, command, trace, screenshot, test result, or other evidence that proves the result.

Trace click, submit, Escape, and outside-click events and explain every modifier retained. Change one condition on purpose, predict the result, and compare the prediction with what actually happened.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →