Events and Accessible Forms

Events and Accessible Forms | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Events and Accessible Forms step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Explain capture, target, bubble, and listener ownership.
Handle the semantic submit event for every input method.
Combine native constraints with clear custom validation.
Delegate dynamic-list events without fragile target assumptions.

DEEP EXPLANATION

Build the complete mental model

Events travel through a propagation path

An event moves through capture toward its target and normally bubbles back through ancestors. event.target is where it began; event.currentTarget is the element whose listener is currently running. Delegation attaches one listener to a stable ancestor and uses closest to resolve an actionable descendant. stopPropagation is rarely a repair for unclear ownership because it can block other legitimate behavior.

Forms already provide interaction semantics

A form can submit from a button, Enter key, requestSubmit, or assistive technology. Listen for submit on the form, not click on one button. Native input types, labels, required, minlength, pattern, checkValidity, and reportValidity provide a resilient baseline. Prevent the default only when JavaScript truly replaces submission; otherwise let normal navigation remain available.

Validation should preserve user effort

Read successful named controls with FormData, normalize at the boundary, and map errors to specific fields or a concise summary. Do not clear the form on failure. On success, move focus only when there is a clear next task and announce the result without repeating every keystroke. Server validation remains required because browser rules can be bypassed.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Own every submit path

The form validates before reading successful controls and renders external text safely.

form.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!form.reportValidity()) return;
  const data = new FormData(form);
  status.textContent = "Registered " + String(data.get("name"));
  form.reset();
});

Example 2: Delegate actions from a list

closest handles clicks on icons inside a button while contains protects the component boundary.

list.addEventListener("click", (event) => {
  const target = event.target;
  if (!(target instanceof Element)) return;
  const button = target.closest("button[data-action]");
  if (!button || !list.contains(button)) return;
  updateTask(button.dataset.action, button.dataset.id);
});

How to trace this lesson

Name the event target, current target, and propagation phase.
List every way the control can be activated, including keyboard submission.
Normalize FormData values before changing state.
Test invalid, corrected, submitted, reset, and repeated-submission states.

Common mistakes and corrections

Listening only for a submit button click.: Listen for submit on the form so keyboard and scripted paths work.
Assuming event.target is always the button.: Guard its type and resolve the intended control with closest.
Clearing invalid input.: Preserve user work and connect a useful message to the failing control.

PRACTICE LADDER

Move from recognition to independent work

1
Log capture and bubble order for three nested elements.
2
Submit a form with mouse, keyboard, and requestSubmit.
3
Build delegated complete/remove controls for newly added tasks.
4
Add field-level and summary errors without duplicating native messages.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Listen for the semantic event

A form can be submitted by its button, the Enter key, or script, so listen for submit on the form rather than only click on one control. event.currentTarget identifies the element whose listener is running. Prevent the default only when your code genuinely replaces the submission behavior.

Native form behavior is a useful foundation

Labels, input types, required constraints, reportValidity, and FormData provide a strong baseline. Custom validation should add specific guidance without removing keyboard submission or browser feedback. Put status messages near the form and expose dynamic results through an appropriate live region.

RUNNABLE EXAMPLE

Change one assumption at a time

Submit invalid and valid values using both Enter and the button. Display the submitted name with textContent and reset only after success.

const form = document.querySelector("form");
form?.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!(event.currentTarget instanceof HTMLFormElement)) return;
  if (!event.currentTarget.reportValidity()) return;

  const data = new FormData(event.currentTarget);
  console.log(Object.fromEntries(data));
});

const form = document.querySelector("form");
form?.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!(event.currentTarget instanceof HTMLFormElement)) return;
  if (!event.currentTarget.reportValidity()) return;

  const data = new FormData(event.currentTarget);
  console.log(Object.fromEntries(data));
});

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

button.addEventListener("click", saveForm);

Reveal repair and explanation

form.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!form.reportValidity()) return;
  saveForm(new FormData(form));
});

Listening only for a button click misses other valid submission paths. The form submit event owns the complete interaction.

INDEPENDENT LAB

Build without copying the example

Enhance a feedback form with native constraints, FormData, inline status, and a clear successful reset.

const form = document.querySelector('form');
const status = document.querySelector('[data-status]');

const form = document.querySelector('form');
const status = document.querySelector('[data-status]');

Press Run to execute your code.

Self-review checklist Keyboard and pointer submission use the same handler. Invalid controls retain their values and receive useful feedback. Successful data is read with FormData and displayed safely.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Which event represents every normal form submission path? submit click change

2. Which API reads successful form controls? FormData URL only querySelectorAll only

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering