Practice Questions

event.target is the element where the event originated (the element the user actually interacted with). event.currentTarget is the element that the event listener is attached to.

// HTML: <div id="parent"><button id="child">Click</button></div>

const parent = document.querySelector("#parent");
parent.addEventListener("click", (event) => {
  console.log(event.target);  // <button> (where click originated)
  console.log(event.currentTarget);  // <div> (where listener is attached)
});

They are the same only when the listener is on the exact element that was clicked.

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

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const formData = new FormData(event.target);
  const email = formData.get("email");
  console.log(email);
});

event.preventDefault() stops the browser’s default behavior of reloading the page on form submission.

It fails because the two arrow functions are different function objects, even though they have the same body. removeEventListener requires the exact same function reference that was passed to addEventListener.

Fix it by using a named function reference:

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

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

The three phases are:

1. Capturing phase: The event travels down from the window through the DOM tree to the target element.
2. Target phase: The event reaches the element where it originated.
3. Bubbling phase: The event travels back up from the target to the window.

By default, event listeners run during the bubbling phase. To listen during the capturing phase, pass true or { capture: true } as the third argument to addEventListener.

const list = document.querySelector("#item-list");

list.addEventListener("click", (event) => {
  if (event.target.matches(".delete-btn")) {
    event.target.closest("li").remove();
  }
});

A single listener on the parent uses event.target.matches() to check which child was clicked. Because the listener is on the container, it automatically works for elements added dynamically.

event.key is the character produced by the key press (affected by keyboard layout and modifier keys, e.g., "a" or "A"). event.code is the physical key on the keyboard (consistent across layouts, e.g., "KeyA").

document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault();
    saveDocument();
  }
});

// Listener
document.addEventListener("app:themeChanged", (event) => {
  console.log("Theme changed to:", event.detail.theme);
});

// Create and dispatch
const event = new CustomEvent("app:themeChanged", {
  detail: { theme: "dark" },
});

document.dispatchEvent(event);

The detail property is how you attach data to a custom event. The namespace prefix app: avoids conflicts with native events.

import { EventEmitter } from "events";

class Counter extends EventEmitter {
  constructor() {
    super();
    this.count = 0;
  }

  increment() {
    this.count++;
    this.emit("changed", this.count);
  }

  decrement() {
    this.count--;
    this.emit("changed", this.count);
  }
}

// Usage
const counter = new Counter();

counter.on("changed", (count) => {
  console.log("Count is now:", count);
});

counter.increment();  // Count is now: 1
counter.increment();  // Count is now: 2
counter.decrement();  // Count is now: 1

stopPropagation() prevents the event from continuing to propagate to parent (or child) elements, but other listeners on the same element still run.

stopImmediatePropagation() does the same and also prevents other listeners on the same element from running.

child.addEventListener("click", (event) => {
  event.stopImmediatePropagation();
  console.log("First handler");  // Runs
});

child.addEventListener("click", () => {
  console.log("Second handler");  // Never runs
});

parent.addEventListener("click", () => {
  console.log("Parent handler");  // Never runs
});