Browser Events

Browsers generate events in response to user actions and system changes. You can listen for these events and execute code in response. In the DOM chapter, we covered the basics of attaching event listeners. This section covers the different event types and listener options.

Adding Event Listeners

The addEventListener method registers a function to be called when an event occurs:

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

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

You can also use a named function:

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

button.addEventListener("click", handleClick);

Common Event Types

Mouse Events

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

box.addEventListener("click", () => console.log("Clicked"));
box.addEventListener("dblclick", () => console.log("Double-clicked"));
box.addEventListener("mouseenter", () => console.log("Mouse entered"));
box.addEventListener("mouseleave", () => console.log("Mouse left"));

Keyboard Events

document.addEventListener("keydown", (event) => {
  console.log("Key pressed:", event.key);
});

document.addEventListener("keyup", (event) => {
  console.log("Key released:", event.key);
});

Form Events

const form = document.querySelector("#myForm");
const input = document.querySelector("#email");

form.addEventListener("submit", (event) => {
  event.preventDefault();  // Prevent page reload
  console.log("Form submitted");
});

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

input.addEventListener("focus", () => console.log("Input focused"));
input.addEventListener("blur", () => console.log("Input lost focus"));

Window Events

window.addEventListener("load", () => {
  console.log("Page fully loaded");
});

window.addEventListener("resize", () => {
  console.log("Window resized to:", window.innerWidth, "x", window.innerHeight);
});

window.addEventListener("scroll", () => {
  console.log("Scrolled to:", window.scrollY);
});

Removing Event Listeners

To remove a listener, pass the same function reference to removeEventListener:

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

button.addEventListener("click", handleClick);

// Later, remove it
button.removeEventListener("click", handleClick);

// This won't work - different function references
button.addEventListener("click", () => console.log("Click"));
button.removeEventListener("click", () => console.log("Click"));  // Does nothing!

One-Time Listeners with the once Option

To run a handler only once, use the once option:

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

Multiple Listeners

You can attach multiple listeners to the same event:

button.addEventListener("click", () => console.log("First handler"));
button.addEventListener("click", () => console.log("Second handler"));
// Both run when button is clicked

Event Listener Options

The third argument to addEventListener can be an options object:

element.addEventListener("click", handler, {
  once: true,  // Remove after first invocation
  passive: true,  // preventDefault() is ignored (performance hint)
  capture: true,  // Use capture phase (covered in Event Propagation)
});

The passive option is useful for scroll and touch events where you do not need to prevent default behavior. It tells the browser it can scroll smoothly without waiting to see if you will call preventDefault. Use it on scroll and touchmove listeners for better performance.