JavaScript Events: Responding to User Interaction

We’ve reached the final piece, and it’s the one that ties everything together. You can already store data, write logic, and change the page with the DOM. But so far your code runs once when the page loads, then stops. Events are what let your code wait for the user to do something — click a button, type in a field, submit a form — and react to it. This is the heartbeat of every interactive website.

Back in the very first JavaScript article, we said JavaScript is fundamentally about “an event, and code that reacts to it.” This is where that idea becomes real. Let’s make pages truly interactive.

What an event is

An event is something that happens on the page, usually because of the user. A click is an event. Typing a key is an event. Submitting a form, moving the mouse, the page finishing loading — all events. The browser is constantly firing off events as the user interacts with the page.

Your job is to listen for the events you care about and run code when they fire. The function you hand over is called an event handler — it “handles” the event by running in response to it. The whole model boils down to one sentence: when this event happens on this element, run this function.

addEventListener: the main tool

The standard way to listen for an event is the addEventListener method. You call it on an element, telling it which event to listen for and what function to run:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("The button was clicked!");
});

Read it out loud: “on the button, listen for a click, and when it happens, run this function.” Now every time the user clicks that button, the function runs and the message prints. Click it five times, the function runs five times. The page is finally responding to the user.

The structure is always the same: element.addEventListener("eventName", handlerFunction). The first argument is the event name as a string ("click", "input", etc.), and the second is the function to run.

Common events

"click" is the one you’ll use most, but there are many event types for different interactions. A few you’ll meet often:

Each one lets you respond to a different kind of interaction. The "input" event, for instance, is how live search works — you listen for input on a search box and update the results as the user types:

const searchBox = document.querySelector("#search");

searchBox.addEventListener("input", () => {
  console.log("Current text:", searchBox.value);
});

Notice searchBox.value — that’s how you read the current text out of an input field. Every keystroke fires the input event, so you watch the text update live.

The event object

Your handler function can take one argument: the event object, which carries information about what happened. By convention it’s called event (or just e):

button.addEventListener("click", (event) => {
  console.log(event.target);   // the element that was clicked
});

The event object carries useful properties — event.target is the element the event happened on, and for keyboard events event.key tells you which key was pressed. You won’t always need it, but it’s there the moment you do.

One especially common use is event.preventDefault(), which stops the browser’s built-in behavior. The classic case is a form: by default, submitting one reloads the page. To handle the submission with JavaScript instead, you cancel that default first:

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

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the page from reloading
  console.log("Form handled by JavaScript!");
});

Putting it all together: a complete feature

Let’s build something real that pulls in everything from this whole section — DOM selection, an event, a conditional, and updating the page. Here’s a simple to-do adder: type a task, click a button, and watch it appear in a list.

The HTML:

<input id="task-input" type="text" />
<button id="add-btn">Add Task</button>
<ul id="task-list"></ul>

The JavaScript:

const input = document.querySelector("#task-input");
const button = document.querySelector("#add-btn");
const list = document.querySelector("#task-list");

button.addEventListener("click", () => {
  const text = input.value;

  if (text === "") {
    return;   // do nothing if the input is empty
  }

  const li = document.createElement("li");
  li.textContent = text;
  list.appendChild(li);

  input.value = "";   // clear the input for the next task
});

Take a moment to appreciate what this does. When the button is clicked, the code reads the input’s text, checks that it isn’t empty (a conditional), creates a fresh <li> element (the DOM), fills it with the text, adds it to the list, and clears the input. The user types a task, clicks, and watches it land in the list — a genuinely interactive feature, built entirely from the pieces you’ve learned. This is real web development.

Wrapping up — and the end of the frontend journey

Events bring your pages to life, and now you can build interactivity:

• An event is something that happens on the page (a click, a keystroke, a form submit); your code listens for it and reacts.
• addEventListener("event", handler) is the standard way to respond to events — cleaner and more flexible than inline onclick.
• Common events include click, input, submit, and mouse/keyboard events; read input values with .value.
• The event object (event.target, event.key) carries details, and event.preventDefault() stops default browser behavior — essential for forms and links.
• Combining events, the DOM, conditionals, and the rest gives you complete, interactive features.

And with that, you’ve reached the end of the frontend fundamentals. Look back at how far you’ve come: from writing your first HTML tag, to styling pages with CSS, to programming with JavaScript and making pages respond to users. Those three layers — structure, style, and behavior — are the foundation of everything on the web, and you now understand all three.

The best thing you can do from here is build. Take these pieces and make something small of your own — a to-do list, a tip calculator, a little interactive page. Every real project teaches you more than any article ever could, and you already have everything you need to start.