JavaScript Core | VoidX Academy

11. Events & Interactivity

Browser API

Events

Without Events, a webpage is just a static poster. Events are "things that happen" — a mouse click, a keyboard press, a form submission. JavaScript can listen for these events and execute code when they occur.

🎧 Event Listeners

You attach an "Event Listener" to a DOM element. It waits silently in the background until the event fires.

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

// Listens for a "click", then runs the arrow function
btn.addEventListener("click", () => {
    console.log("Item added to cart!");
    btn.textContent = "Added!";
    btn.style.backgroundColor = "gray";
});

⌨️ The Event Object

When an event fires, the browser passes an "Event Object" (usually named e or event) into your function. It contains critical data about what just happened.

const inputField = document.querySelector("#username");

// Fires every time the user types a letter
inputField.addEventListener("input", (event) => {
    // event.target.value contains what they typed
    console.log("User is typing:", event.target.value);
});

🫧 Event Bubbling & Delegation

When you click a button inside a <div>, the click triggers on the button, but then "bubbles up" and triggers on the <div> too. This allows a senior architecture pattern called Event Delegation.

Instead of adding 100 event listeners to a list of 100 items, you add one listener to the parent container, and check what was clicked.

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

listContainer.addEventListener("click", (e) => {
    // Check if the thing they clicked was actually a button
    if (e.target.tagName === "BUTTON") {
        console.log("Deleted item!");
        e.target.parentElement.remove();
    }
});

11. Events & Interactivity

Browser API

Events

🎧 Event Listeners

You attach an "Event Listener" to a DOM element. It waits silently in the background until the event fires.

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

// Listens for a "click", then runs the arrow function
btn.addEventListener("click", () => {
    console.log("Item added to cart!");
    btn.textContent = "Added!";
    btn.style.backgroundColor = "gray";
});

⌨️ The Event Object

When an event fires, the browser passes an "Event Object" (usually named e or event) into your function. It contains critical data about what just happened.

const inputField = document.querySelector("#username");

// Fires every time the user types a letter
inputField.addEventListener("input", (event) => {
    // event.target.value contains what they typed
    console.log("User is typing:", event.target.value);
});

🫧 Event Bubbling & Delegation

Instead of adding 100 event listeners to a list of 100 items, you add one listener to the parent container, and check what was clicked.

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

listContainer.addEventListener("click", (e) => {
    // Check if the thing they clicked was actually a button
    if (e.target.tagName === "BUTTON") {
        console.log("Deleted item!");
        e.target.parentElement.remove();
    }
});

11. Events & Interactivity

Events

🎧 Event Listeners

⌨️ The Event Object

🫧 Event Bubbling & Delegation

Knowledge Check

11. Events & Interactivity

Events

🎧 Event Listeners

⌨️ The Event Object

🫧 Event Bubbling & Delegation

Knowledge Check