Events

Events are what make web pages truly interactive. Every button click, form submission, and hover effect is powered by the event system.

addEventListener

The main way to respond to events is addEventListener:

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

button.addEventListener("click", function() {
  console.log("Button clicked!");
});

// Using an arrow function (more common)
button.addEventListener("click", () => {
  console.log("Button clicked!");
});

The two arguments are: the event type (a string) and the callback (the function to run).

Common Event Types

// Mouse events
element.addEventListener("click", handler);
element.addEventListener("dblclick", handler);
element.addEventListener("mouseover", handler);
element.addEventListener("mouseout", handler);
element.addEventListener("mousemove", handler);

// Keyboard events
document.addEventListener("keydown", handler);
document.addEventListener("keyup", handler);

// Form events
input.addEventListener("input", handler);      // fires on every keystroke
input.addEventListener("change", handler);     // fires when focus is lost
form.addEventListener("submit", handler);

// Page events
window.addEventListener("load", handler);
window.addEventListener("resize", handler);

The Event Object

Every event handler receives an event object with details about what happened:

document.addEventListener("keydown", (event) => {
  console.log(event.key);     // "Enter", "ArrowUp", "a", etc.
  console.log(event.code);    // "Enter", "ArrowUp", "KeyA"
  console.log(event.ctrlKey); // true if Ctrl was held
});

document.addEventListener("click", (event) => {
  console.log(event.target);  // the element that was clicked
  console.log(event.clientX); // X position of the click
  console.log(event.clientY); // Y position of the click
});

Preventing Default Behaviour

Some elements have default behaviour — links navigate, forms reload the page. Use event.preventDefault() to stop that:

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

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the page from reloading

  const input = document.querySelector("input");
  console.log("Form submitted with: " + input.value);
});

Reacting to Input

The input event fires every time the user types in a field — great for live feedback:

const nameInput = document.querySelector("#name");
const preview = document.querySelector("#preview");

nameInput.addEventListener("input", () => {
  preview.textContent = "Hello, " + nameInput.value + "!";
});

Event Delegation

Instead of adding a listener to every item in a list, add one listener to the parent. Use event.target to identify which child was clicked:

const list = document.querySelector("ul");

list.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("done");
  }
});

This is more efficient and works even for items added dynamically later.

Removing Event Listeners

You can remove a listener with removeEventListener. The function must be the same reference:

function handleClick() {
  console.log("Clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);   // removed

Running Code Once

Use the { once: true } option to run a listener only once, then automatically remove it:

button.addEventListener("click", () => {
  console.log("This only runs once!");
}, { once: true });

Try It Yourself