What You'll Learn at This Station
HAP's Discovery: A web page can have buttons, links, and interactive elements everywhere, but none of them do anything until you tell the browser to listen. I learned the three-part pattern that makes any element respond to any action — and discovered that the function you pass in has a name: a callback.
The Wiring
addEventListener
The method that tells the browser: "Watch this element. When this event happens, run this function." Three parts: target, event type, callback.
The Callback
function(event)
A function you pass to another function to run later. Not called immediately — stored by the browser and invoked when the event fires.
The Event Types
'click', 'submit', 'keydown'
The browser can listen for dozens of event types. Click is where most people start, but the pattern works for any of them.
HAP's Confession:
- I clicked the status badge over and over, expecting something to happen. Nobody had told the browser to listen.
- I put addEventListener on the wrong element reference — I was targeting a variable that did not exist yet.
- I forgot to define my callback function before passing it to addEventListener. Got a "not defined" error and stared at it for ten minutes.
- I named my callback parameter 'e' because the AI did. Two days later, I could not remember what 'e' meant. Renamed it to 'event' and everything was clearer.
The addEventListener Pattern
Every addEventListener call has exactly three parts. Prof. Teeters' doorbell analogy helped me see the structure: the target is the button, the event type is the press, and the callback is the bell.
1. The Target
The DOM element you want to watch. You get it with querySelector, just like in the DOM lab. This is the doorbell button — the thing the user interacts with.
2. The Event Type
A string that tells the browser what action to listen for: 'click', 'submit', 'keydown', 'mouseover'. This is what kind of press activates the bell.
3. The Callback
The function that runs when the event happens. You pass it in — you do not call it yourself. The browser stores it and invokes it later. This is the bell itself.
Putting It Together
target.addEventListener(type, callback) — that is the entire pattern. Every interactive feature on every website starts here.
Prof. Teeters:
"Think of it like a doorbell. The button has always been there. But until you wire it to a bell, pressing it does nothing. addEventListener is the wiring."
// The three parts of addEventListener
const statusBadge = document.querySelector('.status-badge');
statusBadge.addEventListener('click', function(event) {
statusBadge.classList.toggle('active');
});Three parts: statusBadge is the target, 'click' is the event type, and the function is the callback. When the badge is clicked, the browser runs the callback and toggles the 'active' class.
What Is a Callback?
I kept hearing the word "callback" and it confused me. I was passing a function into addEventListener, but I was not calling it. Grace Hopper cleared this up in her precise way.
Grace Hopper:
"A callback is not executed. It is registered. The browser stores a reference to your function and invokes it when the event occurs. The distinction between calling a function and passing a function is fundamental."
That distinction — calling vs. passing — tripped me up more than once. Here is the difference:
// Using a named callback function
const statusBadge = document.querySelector('.status-badge');
function toggleStatus(event) {
statusBadge.classList.toggle('active');
console.log('Badge toggled!');
}
// Pass the function reference — no parentheses!
statusBadge.addEventListener('click', toggleStatus);The function toggleStatus is defined first, then passed to addEventListener by name. No parentheses — we are passing the function reference, not calling it.
// Common mistake: CALLING the function instead of PASSING it
statusBadge.addEventListener('click', toggleStatus());
// ^^
// This CALLS toggleStatus immediately and passes
// its return value (undefined) as the callback.
// The click event will do nothing.
// Correct: pass the function reference
statusBadge.addEventListener('click', toggleStatus);
// ^^^^^^^^^^^^
// No parentheses — this passes the function itself.
// The browser stores it and calls it when the click happens.This was one of my worst mistakes. Adding parentheses calls the function immediately and passes its return value (undefined) to addEventListener. The event does nothing.
HAP's Breakthrough:
When my first click actually toggled the status badge, my mind was blown. I had been building DOM elements for a whole lab, but this was the first time the page responded to me. The badge changed color and I must have clicked it fifty times. 🟠
addEventListener Quick Reference
The Three-Part Pattern
target.addEventListener(eventType, callback) — target is the element, event type is a string like 'click', and callback is the function that runs when the event fires.
Callbacks Are Passed, Not Called
Write addEventListener('click', toggleStatus) with no parentheses. Adding () calls the function immediately and passes its return value instead.
Common Event Types
'click' for mouse clicks, 'submit' for forms, 'keydown' for keyboard input, 'change' for dropdowns and checkboxes, 'input' for text fields.
Name Your Callback Parameter
Use event instead of e for clarity. The browser passes an event object to every callback — you will explore that object at the next station.
I can make something happen on click now. But inside that callback, the browser is sending me something — an event object packed with information. What exactly is the browser telling me when an event fires? 🟠