JavaScript Events

Attach event handlers for flexible, composable event handling.

const button = document.querySelector("button");
button.addEventListener("click", (event) => {
  console.log("Button clicked");
});

Contains details about what happened, like type, target, and position.

button.addEventListener("click", (e) => {
  console.log(e.type);      // "click"
  console.log(e.target);    // the button element
  console.log(e.clientX);   // mouse position
});

Removes a listener when it's no longer needed.

const handler = (e) => console.log("clicked");
button.addEventListener("click", handler);
button.removeEventListener("click", handler);

Inline event handlers like onclick are outdated compared to addEventListener.

// Avoid: <button onclick="handleClick()">Click</button>
// Use addEventListener instead

Fires a listener only one time, then removes it automatically.

button.addEventListener("click", handler, { once: true });
// Handler is automatically removed after first click

Events bubble up from child to parent by default.

div.addEventListener("click", () => console.log("div clicked"));
button.addEventListener("click", () => console.log("button clicked"));
// Clicking button logs both "button clicked" and "div clicked"

Prevents an event from bubbling up to parent listeners.

button.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("button only");
});

Pass true as the third argument to listen during the capture phase.

div.addEventListener("click", handler, true);
// Capture phase runs before bubble phase

Most events bubble, but check the MDN docs for specific events that don't.

Use stopPropagation to prevent parent handlers from running at all.

Stops the browser's default action for an event.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // Form does not submit to server
  console.log("Form submission intercepted");
});

Works on clickable links, form submissions, and other cancelable events.

link.addEventListener("click", (e) => {
  e.preventDefault();
  // Link does not navigate to href
});

Check whether preventDefault was already called on the event.

if (!event.defaultPrevented) {
  // Default action will occur
}

Not all events can be prevented — check if the event is cancelable first.

Verify the event supports preventDefault before calling it.

link.addEventListener("click", (e) => {
  if (e.cancelable) {
    e.preventDefault();
  }
});

Attach a single listener to a parent to handle children efficiently.

const list = document.querySelector("ul");
list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("Clicked item:", e.target.textContent);
  }
});

This pattern is efficient when there are many similar elements.

// Instead of attaching listeners to each item:
items.forEach(item => item.addEventListener("click", handler));

// Attach one listener to the container:
container.addEventListener("click", handler);

Finds the closest matching ancestor from the actual clicked element.

document.addEventListener("click", (e) => {
  const button = e.target.closest("button");
  if (button) console.log("Button clicked");
});

Delegation works with elements added to the DOM after the listener was attached.

click, dblclick, mousedown, mouseup, and mousemove track pointer activity.

element.addEventListener("mousemove", (e) => {
  console.log(`Mouse at ${e.clientX}, ${e.clientY}`);
});

keydown and keyup track key presses; keypress is deprecated.

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

change, input, submit, reset, focus, and blur track form interaction.

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

load, unload, scroll, and resize track the page and viewport.

window.addEventListener("scroll", () => {
  console.log("Page scrolled");
});