arcbyte/JavaScript
LibraryJavaScriptEvents and Forms

Events and Forms

Respond to interaction, validate form data, and manage event flow.

Updated Tested with Modern browsers

Events report that something happened: a click, input change, submission, key press, or network result. Listen at the element responsible for the behavior.

Add an event listener

theme.js
const toggle = document.querySelector("#theme-toggle");

toggle?.addEventListener("click", (event) => {
  console.log(event.currentTarget);
  document.documentElement.classList.toggle("dark");
});

currentTarget is the element with the listener. target is the deepest element where the event began.

Handle a form

signup.js
const form = document.querySelector("#signup");

form?.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const email = String(data.get("email") ?? "").trim();

  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }

  console.log({ email });
});

Listen for submit, not only a button click: forms can be submitted by keyboard and other mechanisms. Native validation remains useful, but the server must validate again.

Delegate repeated interactions

courses.js
document.querySelector("#course-list")?.addEventListener("click", (event) => {
  const button = event.target.closest("button[data-course]");
  if (!button) return;
  openCourse(button.dataset.course);
});

One listener on a stable parent can handle present and future children as the event bubbles.

Keep this

Listen for semantic events, distinguish target from current target, handle form submission itself, and validate at every trust boundary.

Your place is saved on this device.