addEventListener
Registers a listener.
Platform under construction
Event Listeners
Event listeners connect events to functions. They can be added, removed and configured with options.
function handleClick() {
console.log("saved");
}
button.addEventListener("click", handleClick);
Events & Forms
A listener is a function registered for a specific event type.
addEventListener takes an event type, a callback and optional configuration. The same element can have multiple listeners for the same event.
Named functions are easier to remove than anonymous functions because removeEventListener needs the same function reference.
Options such as once, capture and passive change how the listener behaves. Use them deliberately, not by habit.
removeEventListener
Removes a listener by matching the same callback.
once
Runs the listener only one time.
passive
Promises not to call preventDefault.
Examples
Event code should respect how people actually use the interface.
Use a named handler when cleanup matters
function handleSave() {
saveDraft();
}
button.addEventListener("click", handleSave);
button.removeEventListener("click", handleSave);
Trying to remove a different function
button.addEventListener("click", () => saveDraft());
button.removeEventListener("click", () => saveDraft());
// These are two different functions.
Code patterns
Reusable examples for quick reference.
These examples are the event patterns you will reuse constantly: listen, inspect, prevent, delegate, validate and submit.
Named handler
Useful when you may remove it later.
function handleClick() {
console.log("clicked");
}
button.addEventListener("click", handleClick);
Remove listener
Use the same function reference.
button.removeEventListener("click", handleClick);
Run once
Good for one-time setup actions.
button.addEventListener("click", setup, { once: true });
Abort signal
Modern cleanup pattern for groups of listeners.
const controller = new AbortController();
button.addEventListener("click", save, { signal: controller.signal });
controller.abort();
Rules that matter
Make interaction predictable.
Events are user-facing code. Good handlers stay small, respect native behavior and keep visual, semantic and data state aligned.
Use named handlers for cleanup
The callback reference must match.
Register once during setup
Repeated registration can fire the same logic many times.
Use once when appropriate
One-time interactions do not need manual cleanup.
Use AbortController for grouped cleanup
One abort can remove multiple listeners.
Be careful with passive
passive listeners cannot prevent default behavior.
Keep handler responsibilities clear
A listener should respond to one event, not run an entire application.
Production thinking
Strong event handling makes an interface feel reliable instead of accidental.
Why does this matter?
Listener management prevents duplicate behavior, memory leaks and impossible-to-debug repeated actions.
Accessibility
Listeners should be attached to semantic controls so keyboard activation works without extra code.
Production note
Production interfaces should remove listeners when temporary UI is destroyed or no longer active.
SEO note
Real links and forms should keep working without relying on fragile listener setup whenever possible.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add a listener with { once: true }.
- Replace removeEventListener with AbortController.
- Log when duplicate listeners are accidentally registered.
Practice assignment
Do this before moving to the next topic.
- Write one named handler.
- Register it with addEventListener.
- Remove it with removeEventListener.
Try it yourself
Add and remove a listener
Self-check
Before you continue, prove that you understand Event Listeners.
If you can explain what fires, where it fires and what default behavior remains, you understand the interaction.
- Can you explain addEventListener?
- Can you explain removeEventListener?
- Can you explain why function identity matters?
- Can you explain the once option?
- Can you explain AbortController cleanup?