How Do Event Listeners Work?

You register a function against a type of event on a target, and the browser calls it when that event happens on that target. The addEventListener method takes the event type as a string, the function to call, and an optional options object.

// Node ships the same EventTarget API the browser uses, so this runs here too.
const button = new EventTarget();
let clicks = 0;

const onClick = (event) => {
  clicks += 1;
  console.log("clicked", clicks, "type:", event.type);
};

button.addEventListener("click", onClick);
button.dispatchEvent(new Event("click"));
button.dispatchEvent(new Event("click"));

console.log("total clicks:", clicks);   // 2

The important detail is the options object, because it controls how the listener behaves. The capture option decides which phase of the event propagation the listener runs in, and it defaults to false, meaning the bubble phase. The once option removes the listener after it fires for the first time. The passive option promises that the listener will not call preventDefault, which lets the browser keep scrolling smoothly even while the listener runs.

Listeners fire in the order they were added, and the same function can be registered for the same event more than once, in which case it runs once per registration. That last point is the source of a very common bug, where a component that re-registers its listener on every render ends up handling a single click several times.

There is also the older approach of assigning a handler property, such as element.onclick. It is simpler, but it replaces any previous handler rather than adding to it, and it does not support the capture, once or passive options. New code should use addEventListener.

You call removeEventListener with the same event type and the same function reference. The reference is what the browser uses to identify the registration, so an identical-looking but different function will not remove anything.

const emitter = new EventTarget();

const handler = (event) => console.log("handled:", event.type);

emitter.addEventListener("ping", handler);
emitter.dispatchEvent(new Event("ping"));   // handled: ping

// A different function with the same body does not match the registration.
emitter.removeEventListener("ping", (event) => console.log("handled:", event.type));
emitter.dispatchEvent(new Event("ping"));   // handled: ping - still registered

// The same reference does remove it.
emitter.removeEventListener("ping", handler);
emitter.dispatchEvent(new Event("ping"));   // nothing printed

This is why the classic cleanup pattern stores the handler in a variable or a class field. If you write an inline arrow function when you register and a different inline arrow function when you try to remove it, the removal silently fails and you leak the listener. The same applies to a bound function, because every call to bind creates a new function object, so a bound reference created twice is not the same reference twice.

The other important detail is that removeEventListener has to match the capture setting too. A listener registered with capture set to true is a different registration from the same function registered with capture set to false, and you have to remove it with the same option.

For anything longer lived than a single interaction, the pattern to reach for is to register the listener when the component is created and remove it when the component is torn down. In a framework that is what the cleanup function returned from an effect is for. In plain JavaScript, returning a teardown function from your setup function is the equivalent habit.

The once option handles the first case, and keeping a reference to the function handles the second. Both are worth being able to write from memory.

const emitter = new EventTarget();

// A listener that runs only once.
emitter.addEventListener("boot", () => console.log("booted"), { once: true });

emitter.dispatchEvent(new Event("boot"));   // booted
emitter.dispatchEvent(new Event("boot"));   // nothing - the listener is gone

// A listener you can detach later.
const onStop = () => console.log("stopped");

emitter.addEventListener("stop", onStop);
emitter.dispatchEvent(new Event("stop"));   // stopped

emitter.removeEventListener("stop", onStop);
emitter.dispatchEvent(new Event("stop"));   // nothing

The once option is the cleanest way to express a one-shot subscription. It works in the browser too, where it is useful for a welcome message that should appear once, or a tutorial hint that should not come back after the user has dismissed it.

Note that a listener registered with the once option still has to be removed in one case: if the event never fires, the registration stays. If you need to be certain the listener goes away, remove it explicitly.

For the detachable case, the pattern of holding the function in a variable is the whole trick. As soon as you need to remove a listener, the reference has to exist somewhere, and a named variable or a class field is where it should live.

One more option to mention is the AbortController. The signal option on addEventListener accepts an abort signal, and calling abort on the controller removes every listener that was registered with that signal at once. That is a tidy way to clean up a group of listeners in a single call.