JavaScript Academy · Lesson

addEventListener Basics

Attach handlers to elements for events.

addEventListener Basics is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Responding to Events

Events let your code react to user actions like clicks, key presses, and form submissions. addEventListener is the standard way to subscribe.

Basic Syntax

Call addEventListener with an event name and a handler function. The handler runs each time the event occurs.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Named Handlers

You can pass a named function. This keeps code organized and, crucially, lets you remove the listener later.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Multiple Listeners

Unlike the old onclick property, you can attach many listeners for the same event without overwriting each other.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

To stop listening, call removeEventListener with the same event name and function reference used to add it.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Anonymous Functions Cannot Be Removed

An inline arrow function creates a new reference each time, so it cannot be removed later. Use a named reference if you need removal.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

The once Option

Passing { once: true } automatically removes the listener after it fires a single time.

btn.addEventListener("click", init, { once: true });

The capture Option

By default listeners run during the bubbling phase. { capture: true } makes them run during the capturing phase instead.

parent.addEventListener("click", handler, { capture: true });

The passive Option

{ passive: true } promises you will not call preventDefault, letting the browser optimize scrolling performance.

window.addEventListener("scroll", onScroll, { passive: true });

The signal Option

An AbortController signal lets you remove a listener (or many) by aborting, which is handy for cleanup.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this Inside Handlers

In a regular function handler, this refers to the element the listener is attached to. Arrow functions do not rebind this.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Quick Check

Test removal rules.

Recap

addEventListener(type, handler, options) subscribes to events and supports multiple listeners. Remove them with removeEventListener using the same reference, so prefer named functions. Useful options include once, capture, passive, and signal. In regular handlers, this is the target element.

Frequently asked questions

Is the “addEventListener Basics” lesson free?

Yes — the full text of “addEventListener Basics” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “addEventListener Basics”?

Attach handlers to elements for events. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “addEventListener Basics” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy