🖱️ Event Listeners and Handlers

What Is an Event?

An event is a signal that something happened. Think of a doorbell: someone presses the button (the action), the bell rings (the event fires), and you decide what to do — answer, ignore, or peek through the window (your handler). The browser is constantly firing events as the user interacts with the page; your job is to listen for the ones you care about and respond.

Three pieces make this work, and it helps to name them precisely:

• Event target — the element the event happens on (a button, an input, the whole window).
• Event listener — the registration that says "when this event happens on this target, call that function."
• Event handler — the function that actually runs and does the work.

Everything interactive you'll ever build — a menu that opens, a form that validates, a game that responds to arrow keys — is this loop repeated thousands of times a second. Let's learn how to hook into it.

Three Ways to Handle Events

Historically there have been three ways to attach a handler. Modern code uses exactly one of them — but you should recognize all three, because you'll meet them in the wild.

1. Inline HTML attributes (avoid)

<!-- Behavior tangled into markup — hard to reuse, hard to test -->
<button onclick="alert('Hello!')">Click me</button>

👎 This mixes JavaScript into your HTML, can only hold one handler, and is a security and maintainability headache. Fine for a five-second demo, wrong for real projects.

2. DOM event properties (onclick)

const button = document.querySelector('#save');
button.onclick = function () {
    console.log('Button clicked!');
};

// The catch: assigning again OVERWRITES the first handler.
button.onclick = () => console.log('Only this one survives');

👍 Better than inline, but each element can hold only one onclick. A second assignment silently erases the first.

3. addEventListener (the modern standard)

const button = document.querySelector('#save');

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

// You can attach as MANY listeners as you like — they all run:
button.addEventListener('click', () => console.log('First handler'));
button.addEventListener('click', () => console.log('Second handler'));

👍👍 This is the one to use. It supports multiple handlers per event, works with every event type, can be removed later, and accepts an options object for finer control.

The options object

function handleClick() { console.log('clicked once'); }

button.addEventListener('click', handleClick, {
    once: true,      // auto-remove the listener after it fires one time
    capture: false,  // listen during the bubbling phase (the default)
    passive: true    // promise you won't call preventDefault() — speeds up scroll/touch
});

The Event Object

Every handler automatically receives one argument: the event object. It's a detailed report of what just happened — which element, where the mouse was, which key was pressed, and methods to change the browser's default reaction.

button.addEventListener('click', (event) => {
    // What kind of event and where it came from
    console.log(event.type);          // "click"
    console.log(event.target);        // the exact element that was clicked
    console.log(event.currentTarget); // the element the listener is attached to
    console.log(event.timeStamp);     // ms since the page loaded

    // Mouse position (for mouse events)
    console.log(event.clientX, event.clientY); // relative to the viewport
    console.log(event.pageX, event.pageY);     // relative to the whole document

    // Modifier keys held during the event
    console.log(event.shiftKey, event.ctrlKey, event.altKey, event.metaKey);
});

Changing the browser's default: preventDefault()

Many elements have built-in behavior: links navigate, form submit buttons reload the page, right-clicks open a context menu. preventDefault() cancels that default so you can supply your own.

const link = document.querySelector('#details-link');

link.addEventListener('click', (event) => {
    event.preventDefault();          // stop the browser from navigating away
    console.log('Loading details without leaving the page…');
    loadDetailsInPlace(link.href);   // your custom behavior instead
});

Mouse & Keyboard Events

These are the events you'll reach for constantly. Here are the ones worth memorizing.

Mouse events

const box = document.querySelector('.interactive');

box.addEventListener('click', (e) => {
    console.log('Clicked at', e.clientX, e.clientY);
});

box.addEventListener('mouseenter', () => box.classList.add('is-hovered'));
box.addEventListener('mouseleave', () => box.classList.remove('is-hovered'));

// Right-click: replace the native menu with your own
box.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    openCustomMenu(e.pageX, e.pageY);
});

Keyboard events

Use keydown for shortcuts and navigation. The modern property to read is event.key — a human-readable string like "Enter", "Escape", "ArrowUp", or "a". (Avoid the deprecated event.keyCode.)

document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeModal();

    // A "save" shortcut: Ctrl+S (or Cmd+S on Mac)
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();          // stop the browser's Save dialog
        saveDocument();
    }

    // Arrow-key navigation
    switch (e.key) {
        case 'ArrowUp':   moveSelection(-1); break;
        case 'ArrowDown': moveSelection(1);  break;
    }
});

A practical example: live password strength

const password = document.querySelector('#password');
const meter = document.querySelector('#strength');

password.addEventListener('input', (e) => {
    const value = e.target.value;
    let score = 0;
    if (value.length >= 8) score++;
    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score++;
    if (/[0-9]/.test(value)) score++;
    if (/[^a-zA-Z0-9]/.test(value)) score++;

    const labels = ['Too weak', 'Weak', 'Fair', 'Good', 'Strong'];
    meter.textContent = labels[score];
    meter.className = `strength-${score}`;
});

Form & Window Events

Forms and the window itself fire their own useful events. We'll go deep on forms next lesson; here's the essential vocabulary.

Form events

const form = document.querySelector('#signup');

form.addEventListener('submit', (e) => {
    e.preventDefault();                    // don't reload the page
    const data = new FormData(form);       // gather every named field
    for (const [name, value] of data.entries()) {
        console.log(`${name}: ${value}`);
    }
    // …validate and send with fetch()
});

Window & document events

// The DOM is parsed and ready (scripts with defer already run after this)
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM ready — safe to query elements');
});

// A sticky header on scroll (throttle in real code — see the last section)
window.addEventListener('scroll', () => {
    document.querySelector('header')
        .classList.toggle('sticky', window.scrollY > 100);
});

// Warn about unsaved changes before leaving
window.addEventListener('beforeunload', (e) => {
    if (hasUnsavedChanges()) {
        e.preventDefault();
        e.returnValue = '';   // required for the browser to show its prompt
    }
});

Custom Events & Cleanup

Making your own events

You aren't limited to built-in events. CustomEvent lets one part of your app announce that something happened and carry data along in a detail property — a clean way for components to talk without tightly coupling them.

// Create an event that carries a payload
const cartEvent = new CustomEvent('cart:add', {
    detail: { productId: 42, quantity: 2 },
    bubbles: true          // let it travel up the DOM like a native event
});

// Dispatch it from any element
document.querySelector('#add-to-cart').dispatchEvent(cartEvent);

// Anywhere else, listen for it
document.addEventListener('cart:add', (e) => {
    console.log(`Added ${e.detail.quantity} of product ${e.detail.productId}`);
    updateCartBadge();
});

Removing listeners & avoiding memory leaks

Every listener holds a reference to its handler and its element. If you add listeners for a component and never remove them, the browser can't garbage-collect that memory — a classic leak in long-lived apps. To remove a listener you must pass the same function reference you added (so anonymous inline functions can't be removed).

function handleResize() {
    console.log('Window is', window.innerWidth, 'px wide');
}

// Add with a named reference…
window.addEventListener('resize', handleResize);

// …then remove the exact same reference later:
window.removeEventListener('resize', handleResize);

// Modern shortcut: AbortController removes MANY listeners at once
const controller = new AbortController();
button.addEventListener('click', doThing, { signal: controller.signal });
input.addEventListener('input', doOther, { signal: controller.signal });
controller.abort();   // detaches both listeners in one call

Practice & Quiz

const bio = document.querySelector('#bio');
const count = document.querySelector('#count');
const MAX = 200;

// TODO: on every input, update #count and toggle a warning

bio.addEventListener('input', () => {
    const remaining = MAX - bio.value.length;
    count.textContent = `${remaining} characters left`;
    count.classList.toggle('warn', remaining < 20);
});

document.addEventListener('keydown', (e) => {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
        e.preventDefault();          // block the native Save dialog
        console.log('Saving…');
    }
    if (e.key === 'Escape') {
        console.log('Closing');
    }
});

Best Practices & Pitfalls

✅ Do

• Use addEventListener and keep JavaScript out of your HTML
• Read event.key (not the deprecated keyCode) for keyboard events
• Attach submit to the <form> so Enter and clicks both work
• Throttle or debounce high-frequency events (scroll, mousemove, resize, input)
• Remove listeners you no longer need — name your handlers or use AbortController

❌ Don't

• Sprinkle onclick="..." attributes through your markup
• Assume anonymous handlers can be removed later — they can't
• Do heavy work directly inside a scroll or mousemove handler
• Forget preventDefault() on submit handlers when you fetch instead of reload

// A tiny throttle: run at most once per `limit` ms
function throttle(fn, limit) {
    let waiting = false;
    return function (...args) {
        if (waiting) return;
        fn.apply(this, args);
        waiting = true;
        setTimeout(() => (waiting = false), limit);
    };
}

window.addEventListener('scroll', throttle(updateHeader, 100));

Summary

📚 Additional Resources

• MDN — EventTarget.addEventListener()
• MDN — The Event interface
• MDN — Event reference (every event type)

🚀 What's Next?

You can now attach a handler to any element. But events don't stay put — they travel through the DOM in phases. Next up, Event Propagation and Delegation, where you'll learn to handle events for hundreds of elements with a single listener.