JavaScript Events

React to clicks, typing, form submits and key presses.

Lesson 36 of 56Intermediate13 min read

Interactive pages wait for something to happen, such as a click, a key press or a form being submitted, and then react. Those happenings are called events, and addEventListener is how you tell JavaScript: "when this happens to that element, run this function".

Events connect everything you've learned so far. You select an element, listen for an event on it, and when the event fires, your function changes the DOM. Almost every interactive feature on the web follows that same three-step pattern.

How addEventListener works

JavaScript
button.addEventListener("click", () => {
  console.log("Clicked!");
});
  1. The element to listen on.
  2. The event name, as a string without an "on" prefix.
  3. A function to run, called the handler or listener.

The function doesn't run when this line runs. It runs later, every time the event happens. An element can have several listeners for the same event, and they all run.

Common JavaScript events

EventFires when
clickAn element is clicked or tapped (or a button is activated with Enter or Space)
inputThe value of a field changes, on every keystroke
changeA select, checkbox or input's value is committed
submitA form is submitted
keydownA key is pressed
mouseenter / mouseleaveThe pointer moves onto or off an element
focus / blurAn element gains or loses focus
DOMContentLoadedThe HTML has been fully read

For forms, listen for submit on the form rather than click on the button. submit also fires when someone presses Enter in a field.

The event object

Handlers receive an event object with details about what happened:

  • event.target is the element the event happened on.
  • event.key tells you which key was pressed, for keyboard events.
  • event.preventDefault() stops the browser's default action, such as a form reloading the page or a link opening a new address.

You'll call preventDefault() in almost every form submit handler, so that you can check and process the data with JavaScript instead of reloading the page.

Event delegation

Events bubble up from the element where they happened through each of its parents. So instead of adding a listener to 100 list items, add one listener to the list and use event.target.closest("li") to work out which item was clicked. This also works for items added to the list later, which individual listeners wouldn't cover.

JavaScript Events Syntax

Events

el.addEventListener("click", handler);
input.addEventListener("input", (e) => console.log(e.target.value));
form.addEventListener("submit", (e) => {
  e.preventDefault();
});
list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
});

JavaScript Events Summary

  • Events are things that happen on the page, such as clicks and key presses.
  • addEventListener(eventName, handler) runs a function each time the event fires.
  • Listen for submit on forms and call event.preventDefault() to stop a reload.
  • event.target tells you which element the event happened on.
  • Event delegation uses one listener on a parent to handle many children.

JavaScript Events Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A click counter

const likeBtn = document.querySelector("#like");
const countEl = document.querySelector("#count");
let likes = 0;

likeBtn.addEventListener("click", () => {
  likes++;
  countEl.textContent = likes;
  console.log("Likes:", likes);
});
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3The state: how many likes so far.
  2. Line 5Listen for clicks on the button.
  3. Lines 6 to 8Each click updates the state, then the page.
Example 2

Live input and form submit

Type in the box, then press Send.

const form = document.querySelector("#form");
const input = document.querySelector("#msg");
const chars = document.querySelector("#chars");
const sent = document.querySelector("#sent");

input.addEventListener("input", (event) => {
  chars.textContent = `${event.target.value.length} / 40`;
});

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  const li = document.createElement("li");
  li.textContent = text;
  sent.append(li);
  input.value = "";
  chars.textContent = "0 / 40";
});
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 6 to 8input fires on every keystroke, which makes it ideal for live counters and search.
  2. Line 10Listen to the form's submit event (it also fires when pressing Enter).
  3. Line 11Stop the page from reloading.
  4. Line 13Ignore empty messages.
Example 3

Keyboard and event delegation

Click any colour chip, or press keys 1 to 3.

const chips = document.querySelector("#chips");
const swatch = document.querySelector("#swatch");

chips.addEventListener("click", (event) => {
  const button = event.target.closest("button");
  if (!button) return;
  swatch.style.background = button.dataset.color;
  console.log("Picked", button.textContent);
});

document.addEventListener("keydown", (event) => {
  const index = Number(event.key) - 1;
  const button = chips.children[index];
  if (button) button.click();
});
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 4One listener on the parent handles every chip. This is delegation.
  2. Lines 5 to 6Find which button was clicked (or ignore clicks between buttons).
  3. Line 11Listen for key presses anywhere on the page.
  4. Line 14Pretend-click the matching button.

Common JavaScript Events Mistakes

Calling the handler immediately

Don't
button.addEventListener("click", showMenu()); // runs now, not on click
Do
button.addEventListener("click", showMenu);

Listening to the button instead of the form

Don't
submitButton.addEventListener("click", save); // misses Enter key, no validation
Do
form.addEventListener("submit", (e) => { e.preventDefault(); save(); });

The submit event covers clicking, pressing Enter, and runs after built-in HTML validation.

Using onclick attributes everywhere

Don't
<button onclick="doThing()">Go</button>
Do
document.querySelector("#go").addEventListener("click", doThing);

addEventListener keeps JavaScript out of your HTML and allows several listeners per event.

JavaScript Events in Real Projects

Events are the heartbeat of apps

Search-as-you-type uses input, games use keydown, drag-and-drop uses pointer events, infinite scroll uses scroll or observers, and every "Add to cart" is a click. In frameworks you'll write onClick={…}, but underneath it's the same event system.

JavaScript Events Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Run toggleMenu when the button is clicked.

menuButton.("", toggleMenu);
Multiple choicemedium

What does event.preventDefault() do in a submit handler?

Multiple choicemedium

Which event fires on every keystroke in a text box?

Fix the bugmedium

Clicking the button should toggle the dark class on the box and log Dark: true the first time. Fix the bugs.

const box = document.querySelector("#box");
const toggle = document.querySelector("#toggle");

toggle.addEventListener("onclick", () => {
  box.classList.toggle("dark");
  console.log("Dark:", box.classList.contains("dark"));
});
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Clicking toggles the dark class
  • Logs "Dark: true" after a click

JavaScript Events Quiz

3 questions to check what you learned.

  1. Which method attaches an event handler?

    • el.onEvent()
    • el.listen()
    • el.handle()
    • el.addEventListener()

  2. What is event.target?

    • The function that handles the event
    • The element the event actually happened on
    • The parent element
    • The window

  3. What is event delegation?

    • Adding the same listener to every child
    • Passing events to a server
    • Putting one listener on a parent and handling events from its children
    • Removing listeners automatically

JavaScript Events Challenge

Build a tip calculator

When the form is submitted (prevent the reload):

  1. Read the bill from #bill and the tip % from #tip (convert to numbers)
  2. Calculate tip = bill * percent / 100 and total = bill + tip
  3. Show Tip: £7.50 · Total: £57.50 in #result (use toFixed(2))
const calc = document.querySelector("#calc");
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Submitting shows the right result
  • Works with other values
  • Uses a submit listener

Related JavaScript topics

34DOM: Changing ElementsChange text, styles, classes and attributes, and create or remove elements.33DOM: Selecting ElementsFind elements on the page with querySelector, querySelectorAll and friends.18Arrow FunctionsThe short => function syntax, implicit returns and callbacks.19FormsCollect information from visitors with accessible, well-labelled forms.
Esc
↑↓ to navigateEnter to open