JavaScript EventTarget removeEventListener() Method

What You’ll Learn

removeEventListener() unregisters a handler you added with addEventListener(). Per MDN, matching needs the same type, the same listener function, and the same capture flag. Learn the rules, five examples, and try-it labs.

Introduction

Every listener you add should eventually be cleaned up when you no longer need it — page teardown, modal close, route change, or “stop listening” UI. removeEventListener() is the direct way to detach that handler.

The #1 beginner mistake: passing a new function that looks the same. The browser compares function identity, not source text. Store a named function (or a variable that holds the function) so you can pass that same reference to both add and remove.

Pair this page with addEventListener() and dispatchEvent().

Understanding the removeEventListener() Method

removeEventListener looks up a listener by type + function + capture phase, then detaches it from that EventTarget. After removal, that handler will not run for future events of that type.

• You must use the same function reference you passed to addEventListener.
• The capture / useCapture flag must match; other options are ignored for matching.
• Capture and bubble registrations of the same function are separate — remove each one.
• You can also clean up with AbortController.abort() if you used { signal } when adding.

📝 Syntax

General forms of EventTarget.removeEventListener:

removeEventListener(type, listener)
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture)

Parameters

• type — event type string (for example "click" or "ping").
• listener — the same function or handleEvent object to remove.
• options (optional) — object; only capture is used for matching.
• useCapture (optional) — boolean shorthand for the capture flag (default false).

Return value

None (undefined).

Matching rules (MDN)

addEventListener can register the same function more than once if options differ. For removal, only capture / useCapture must match — passive, once, and similar options do not affect the match.

Common patterns

const target = new EventTarget();

function onPing() {
  console.log("ping");
}

target.addEventListener("ping", onPing);
target.removeEventListener("ping", onPing);

// Capture must match:
target.addEventListener("click", onPing, true);
target.removeEventListener("click", onPing, true);

// AbortSignal alternative:
const controller = new AbortController();
target.addEventListener("ping", onPing, { signal: controller.signal });
controller.abort(); // removes the listener

Examples Gallery

Examples follow MDN EventTarget.removeEventListener() patterns. Use View Output or Try It Yourself for each case.

const target = new EventTarget();
const lines = [];

function onHello() {
  lines.push("Hello");
}

target.addEventListener("hello", onHello);
target.removeEventListener("hello", onHello);
target.dispatchEvent(new Event("hello"));

console.log(lines.length ? lines.join("\n") : "(no listeners ran)");
// (no listeners ran)

(no listeners ran)

const target = new EventTarget();
const lines = [];

target.addEventListener("tick", () => {
  lines.push("still here");
});

// New arrow — not the same reference!
target.removeEventListener("tick", () => {
  lines.push("still here");
});

target.dispatchEvent(new Event("tick"));
console.log(lines.join("\n"));
// still here

still here

const target = new EventTarget();
const lines = [];

function onPing() {
  lines.push("ping");
}

target.addEventListener("ping", onPing, true);

target.removeEventListener("ping", onPing, false); // fails
target.dispatchEvent(new Event("ping"));
lines.push("---");

target.removeEventListener("ping", onPing, true); // succeeds
target.dispatchEvent(new Event("ping"));

console.log(lines.join("\n"));
// ping
// ---

ping
---

const target = new EventTarget();
const lines = [];

function second() {
  lines.push("second");
}

function first() {
  lines.push("first");
  target.removeEventListener("step", second);
}

target.addEventListener("step", first);
target.addEventListener("step", second);
target.dispatchEvent(new Event("step"));

console.log(lines.join("\n"));
// first

first

const target = new EventTarget();
const lines = [];
const controller = new AbortController();

target.addEventListener(
  "ping",
  () => lines.push("ping"),
  { signal: controller.signal }
);

target.dispatchEvent(new Event("ping"));
controller.abort();
target.dispatchEvent(new Event("ping"));

console.log(lines.join("\n"));
// ping

ping

🚀 Common Use Cases

• Stop listening — user toggles off a feature that was watching events.
• Component teardown — remove handlers when a widget is destroyed.
• One-shot then detach — or prefer { once: true } / AbortSignal.
• Memory hygiene — avoid leaking listeners on long-lived targets like window.
• Capture-specific cleanup — remove the capture registration separately from bubble.
• Workers — same add/remove pattern off the main thread.

📝 Notes

• Keep named functions (or variables) when you will remove later.
• Only capture matters among options for matching — but mirroring add options is still wise.
• Capture and non-capture copies of the same listener must be removed separately.
• Removal during event processing skips that listener for the current event.
• Available in Web Workers (per MDN).
• Related: addEventListener(), dispatchEvent(), EventTarget().

💡 Best Practices