JavaScriptDomIntermediate

removeEventListener()

Removes a previously attached event handler (same function reference required).

Review the syntaxStudy the examplesOpen the coding app
element.removeEventListener(type, listener, options?)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Removes a previously attached event handler (same function reference required).

The removeEventListener() method removes an event listener from an EventTarget that was previously registered with addEventListener(). For removal to be successful, the arguments provided must precisely match the signature used during registration: the event type string, the exact function reference, and the capture setting. A common pitfall is attempting to remove anonymous functions, which is impossible because there is no stable reference to identify the listener in the internal event registry. From a performance and memory management perspective, removing listeners is vital in Single Page Applications (SPAs) to prevent memory leaks when components are unmounted. Note that the 'capture' flag is the only option in the options object that must match for removal; other properties like 'passive' or 'once' are ignored by the removal algorithm. If a listener was added with 'capture: true', it can only be removed by passing 'true' or an options object with 'capture: true' to removeEventListener().

Quick reference

Syntax

element.removeEventListener(type, listener, options?)

Inputs

Parameters

typestring · Event type like 'click' or 'input'.
listenerFunction · The exact same function used when adding.
options (optional)boolean | EventListenerOptions · Capture flag/options (must match add).

See it in practice

Examples

1

Removing a Named Function Reference

var btn = document.querySelector('button');
function handleClick() {
  console.log('Clicked!');
  btn.removeEventListener('click', handleClick);
  console.log('Listener removed');
}
btn.addEventListener('click', handleClick);
// First click triggers the function and removes itself.
// Subsequent clicks do nothing.
Output:
Clicked! Listener removed

This demonstrates the standard way to remove a listener by passing the named function reference. It effectively creates a 'once' behavior manually.

2

The Importance of the Capture Flag

var box = document.querySelector('#box');
function logEvent() { console.log('Box event'); }

// Added with capture phase
box.addEventListener('click', logEvent, true);

// Fails to remove because capture flag defaults to false
box.removeEventListener('click', logEvent);

// Successfully removes because flags match
box.removeEventListener('click', logEvent, true);
Output:
Box event (if clicked before successful removal)

If a listener is added to the capture phase, the third argument to removeEventListener must also indicate the capture phase, otherwise the removal fails.

3

Handling Event Listeners in Objects

var controller = {
  count: 0,
  handleEvent: function(event) {
    this.count++;
    console.log('Count:', this.count);
  }
};
var btn = document.querySelector('button');
btn.addEventListener('click', controller);

// To remove, pass the same object reference
setTimeout(function() {
  btn.removeEventListener('click', controller);
}, 5000);
Output:
Count: 1 Count: 2...

When an object with a handleEvent method is used as a listener, the object reference itself is used for removal.

Debug faster

Common Errors

1

ReferenceError

Cause: Attempting to remove an anonymous function defined inline during addEventListener.

Fix: Define the function separately and store it in a variable so the same reference can be passed to both methods.

el.addEventListener('click', function() { console.log('Hi'); });
el.removeEventListener('click', function() { console.log('Hi'); }); // Does nothing
2

LogicError

Cause: Using .bind(this) inside addEventListener, which creates a new function instance every time it is called.

Fix: Store the bound function reference in a variable or property before adding it.

this.handler = this.onScroll.bind(this);
window.addEventListener('scroll', this.handler);
window.removeEventListener('scroll', this.handler);

Runtime support

Compatibility

BrowserAll modern browsers, IE9+Modern DOM

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Removes a previously attached event handler (same function reference required).

type: Event type like 'click' or 'input'. listener: The exact same function used when adding. options: Capture flag/options (must match add).

ReferenceError: Define the function separately and store it in a variable so the same reference can be passed to both methods. LogicError: Store the bound function reference in a variable or property before adding it.