JavaScript EventTarget removeEventListener() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word REMOVEEVENTLISTENER

Definition

EventTarget.removeEventListener() removes an event listener previously registered with addEventListener() (MDN). Match the same type, listener reference, and capture flag.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call target.removeEventListener. Start with this line.

JavaScript
removeEventListener(type, listener[, options|useCapture])
CallWhat it does
removeEventListener(type, listener[, options|useCapture])Primary signature.
target.removeEventListener(...)Call with the arguments your case needs.

Built into the browser. Call removeEventListener(...) on an EventTarget (or Element, Document, Window, …) — no import required.

Library declarations
JavaScript
removeEventListener(type, listener[, options|useCapture])

Parameters

ParameterDescription
typeRequired. Event name (e.g. "click")
listenerRequired. Same function / handleEvent object as when added

Return Value

Return ValueDescription
*undefined

JavaScript Examples

Example 1 — Remove a Named Listener

Add a named handler, remove it, then dispatch — nothing runs.

JavaScript
const target = new EventTarget();

function onHello() {
  console.log("Hello");
}

target.addEventListener("hello", onHello);
target.removeEventListener("hello", onHello);
target.dispatchEvent(new Event("hello"));
// (no output)
Try It Yourself

How It Works

  1. Name the function. Store the listener so you can pass the same reference later.
  2. Add. addEventListener("hello", onHello) registers it.
  3. Remove. removeEventListener("hello", onHello) matches and detaches it.
  4. Dispatch. The event fires, but no handler remains.

Example 2 — Function Identity Trap

A new anonymous function does not remove the original listener.

JavaScript
const target = new EventTarget();

target.addEventListener("tick", function () {
  console.log("still here");
});

// Different function object — removal fails
target.removeEventListener("tick", function () {
  console.log("still here");
});

target.dispatchEvent(new Event("tick"));
// still here
Try It Yourself

How It Works

  1. Two functions. Each function () { … } creates a new object.
  2. No identity match. Removal looks for the exact same reference.
  3. Silent failure. Non-matching remove does nothing (no error).
  4. Fix. Keep a named function, or use AbortSignal for cleanup.

Example 3 — Capture Flag Must Match

Wrong useCapture fails; matching true succeeds.

JavaScript
const target = new EventTarget();

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

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

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

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

How It Works

  1. Add with capture. true registers a capturing listener.
  2. Wrong flag. removeEventListener(..., false) does not match.
  3. Correct flag. true matches and removes the listener.
  4. Tip. Reuse the same capture value you used when adding.

Example 4 — Remove Mid-Event

A listener removed during the same dispatch does not run.

JavaScript
const target = new EventTarget();

function second() {
  console.log("second");
}

function first() {
  console.log("first");
  target.removeEventListener("step", second);
}

target.addEventListener("step", first);
target.addEventListener("step", second);
target.dispatchEvent(new Event("step"));
// first
Try It Yourself

How It Works

  1. Register both. first and second listen for "step".
  2. Dispatch once. Listeners run in registration order.
  3. Remove early. Inside first, remove second.
  4. Result. second never runs for that event (MDN).

Example 5 — AbortSignal Cleanup

Abort the controller to detach without calling removeEventListener.

JavaScript
const target = new EventTarget();
const controller = new AbortController();

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

target.dispatchEvent(new Event("ping")); // ping
controller.abort();
target.dispatchEvent(new Event("ping")); // (nothing)
Try It Yourself

How It Works

  1. Create a controller. It owns an AbortSignal.
  2. Pass { signal }. The listener is tied to that signal.
  3. Abort later. controller.abort() removes the listener.
  4. Bulk cleanup. One abort can drop every listener that shares the signal.
Compatibility

Browser Support

EventTarget.removeEventListener() is marked Baseline Widely available on MDN (since July 2015). Available in Web Workers. AbortSignal-based cleanup needs modern AbortController support.

✓ Baseline · Widely available

removeEventListener()

Unregister listeners across modern browsers. Match type, function reference, and capture flag.

98% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
removeEventListener Excellent

Bottom line: Safe for everyday use. Prefer named functions or AbortSignal so cleanup always works.

Frequently Asked Questions

EventTarget.removeEventListener(type, listener) removes a handler previously registered with addEventListener. You must pass the same type and the same function (or handleEvent object) reference.
No. MDN marks removeEventListener() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is available in Web Workers.
Calling it with arguments that do not match any registered listener has no effect. Common causes: a different function reference (anonymous arrows), or a capture flag that does not match.
For matching, only the capture / useCapture flag must match. Other options like passive or once do not matter for removal — but using the same values you used when adding is still the safest habit.
No. If you registered the same function twice — once with capture true and once without — you must remove each separately.
Yes. Pass { signal } from an AbortController to addEventListener, then call abort() on the controller. That removes the listener without calling removeEventListener yourself.

Next: Window

Explore browser window methods and APIs.

Window tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript EventTarget dispatchEvent() Method JavaScript Window Methods