Events and Event Handling

Site Admin · 11 Sep 2026 · 6 views

Events and Event Handling

Events are how browsers tell your JavaScript that something happened - a click, a key press, a form submit, a page load. Event handling makes pages interactive.

Adding Event Listeners

The addEventListener method is the modern way to register handlers:

const button = document.querySelector("#submit-btn");

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

// With multiple handlers (both run)
button.addEventListener("click", handlerOne);
button.addEventListener("click", handlerTwo);

// Remove a handler later
button.removeEventListener("click", handlerOne);

Common Events

// Mouse events
element.addEventListener("click", fn);
element.addEventListener("mouseover", fn);
element.addEventListener("mouseout", fn);
element.addEventListener("dblclick", fn);

// Keyboard events
input.addEventListener("keydown", fn);
input.addEventListener("keyup", fn);
input.addEventListener("keypress", fn);

// Form events
form.addEventListener("submit", fn);
input.addEventListener("change", fn);
input.addEventListener("input", fn);

// Window events
window.addEventListener("load", fn);
window.addEventListener("resize", fn);
window.addEventListener("scroll", fn);

The Event Object

Handlers receive an event object with details about what happened:

element.addEventListener("click", (event) => {
    event.target;        // The element that was clicked
    event.currentTarget; // The element the listener is attached to
    event.preventDefault(); // Stop default behavior (e.g. form submit)
    event.stopPropagation(); // Stop bubbling to parent elements
});

input.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
        console.log("Enter pressed");
    }
    if (event.ctrlKey && event.key === "s") {
        event.preventDefault();
        saveDocument();
    }
});

Event Bubbling and Delegation

Events bubble up from the target to the document. Event delegation attaches one listener to a parent and handles events from many children:

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

list.addEventListener("click", (event) => {
    if (event.target.matches("li")) {
        event.target.classList.toggle("done");
    }
});

Form Submission Pattern

const form = document.querySelector("#login-form");

form.addEventListener("submit", (event) => {
    event.preventDefault(); // Stop page reload
    const name = form.querySelector("#name").value;
    const email = form.querySelector("#email").value;
    console.log({name, email});
    submitToServer({name, email});
});