JavaScript Event Handling: addEventListener, Event Objects & Control

An Event is a signal that something has occurred in the browser—such as a user clicking a button, submitting a form, pressing a keyboard key, resizing the window, or a resource finishing loading. Event Listeners are functions registered to execute whenever that specific event occurs.

The addEventListener Standard

const submitBtn = document.getElementById("submit-btn");

// element.addEventListener(eventType, callbackFunction, options)
submitBtn.addEventListener("click", (event) => {
    console.log("Button clicked!");
    console.log("Event Type:", event.type);       // "click"
    console.log("Event Target:", event.target);   // The clicked <button> element
});

The Event Object (e / event)

When an event fires, the browser automatically passes an Event Object to the handler containing vital details regarding the action:

Common Event Categories & Code Examples

// 1. FORM SUBMIT EVENT (Preventing Page Reload)
const loginForm = document.getElementById("login-form");
loginForm.addEventListener("submit", (e) => {
    e.preventDefault(); // Stop full-page reload!
    console.log("Handling login asynchronously via JavaScript Fetch...");
});

// 2. KEYBOARD EVENT (Listening for Enter Key)
const searchInput = document.getElementById("search-box");
searchInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        console.log(`Initiating search for query: "${e.target.value}"`);
    }
});

// 3. WINDOW SCROLL & RESIZE
window.addEventListener("scroll", () => {
    console.log("Current Vertical Scroll Position:", window.scrollY);
});

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

// Register named listener:
btn.addEventListener("click", handleClick);

// Cleanly unbind listener:
btn.removeEventListener("click", handleClick);