JavaScript — DOM Events

Events connect users to JavaScript

An event is something that happens in the browser:

click · input · change · submit · keydown · keyup
focus · blur · mouseover · load · scroll

addEventListener — the standard pattern

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

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

Every click re-runs the callback.

The event object

Handlers receive details about what happened:

button.addEventListener("click", event => {
    console.log(event.type);      // "click"
    console.log(event.target);    // element that originated it
});

event.target (where it came from) vs event.currentTarget (whose listener is running) differ during bubbling — crucial for delegation.

Forms — preventDefault

Submitting normally reloads the page. Intercept it:

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

    const name = document.querySelector("#name").value;
    console.log(name);        // handle with JS instead
});

Input — live values

input.addEventListener("input", event => {
    console.log(event.target.value);   // fires on EVERY keystroke
});

Perfect for live search and inline validation. change fires only when the value is "committed" (blur/enter) — input is usually what you want for text fields.

Keyboard events

document.addEventListener("keydown", event => {
    if (event.key === "Enter") console.log("Enter pressed");
    if (event.key === "Escape") closeModal();
});

Mouse family

click · dblclick · mousedown · mouseup · mousemove · mouseenter · mouseleave

box.addEventListener("mouseenter", () => box.classList.add("hover"));

Named handlers & removal

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

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);   // SAME reference required

An inline arrow can't be removed — it's a different function each time.

Bubbling

Events travel from target upward through ancestors:

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

parent.addEventListener("click", () => console.log("parent"));
child.addEventListener("click",  () => console.log("child"));

// click → "child" then "parent"

Stop the climb with event.stopPropagation() — but sparingly; delegation usually serves better.

Phases: capturing ↓ target ↓ bubbling — listeners default to bubbling; opt into capture via { capture: true }.

Event delegation — one listener, many targets

list.addEventListener("click", event => {
    if (event.target.matches("button")) {
        console.log("Button clicked:", event.target);
    }
});

Works for buttons added later too — no re-binding. When clicks land on inner elements (e.g. a span inside the button), climb up:

const button = event.target.closest("button");
if (!button) return;

Handy listener options

el.addEventListener("click", handler, { once: true });      // auto-remove after first run

window.addEventListener("touchstart", handler, { passive: true }); // promises no preventDefault — scroll perf

const controller = new AbortController();
el.addEventListener("click", h1, { signal: controller.signal });
el.addEventListener("click", h2, { signal: controller.signal });
controller.abort();   // removes ALL of them at once

Common gotcha

button.addEventListener("click", handleClick());   // ❌ calls NOW
button.addEventListener("click", handleClick);     // ✓ passes reference

Mini Practice

1. Click listener logging event.target and type.
2. Form submit with preventDefault reading input values.
3. Live search box using the input event.
4. Enter/Escape key handling on document.
5. Demonstrate bubbling order parent←child; then closest()-based delegation on a list.
6. { once: true } one-time button.
7. Remove three listeners at once via AbortController.

Next: Web APIs →