Events: Listening and Reacting

So far your code has run top to bottom, once. Events change everything: you register a function, and the browser calls it whenever the action happens — a click, a keypress, a form submit.

addEventListener

const btn = document.querySelector("#save");

btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Read it as: on btn, whenever a click happens, run this function. The function is the handler — the browser calls it, not you. Nothing happens until the user acts.

The common events

| Event | Fires when | | --------- | ----------------------------------------------------- | | click | an element is clicked or tapped | | input | a text field's value changes, per keystroke | | submit | a form is submitted (on the form, not the button) | | keydown | a key is pressed |

const field = document.querySelector("#search");
field.addEventListener("input", () => {
  console.log("Now contains:", field.value);
});

The event object and preventDefault

Handlers receive an event object with details of what happened:

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

form.addEventListener("submit", (event) => {
  event.preventDefault(); // stop the browser's full-page reload
  console.log("Handling the submit ourselves");
});

event.preventDefault() cancels the default browser behavior. For forms that is essential: without it, submitting reloads the page and your JavaScript never gets to respond. Nearly every modern app intercepts submit this way and updates the page in place.

Buttons: click handlers with real work

const counterBtn = document.querySelector("#increment");
const display = document.querySelector("#count");
let count = 0;

counterBtn.addEventListener("click", () => {
  count++; // update state first…
  display.textContent = count; // …then reflect it in the page
});

State first, render second — this two-step dance is the core of every interactive app you will build.

What you learned

• element.addEventListener("click", handler) — the browser calls your function
• click, input, submit, keydown
• Handlers receive an event object; preventDefault() stops default behavior
• Update state, then render it

Next: forms — collecting and validating user input.