EventTarget: removeEventListener() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Note: This feature is available inWeb Workers.

TheremoveEventListener() method of theEventTarget interfaceremoves an event listener previously registered withEventTarget.addEventListener() from the target.The event listener to be removed is identified using a combination of the event type,the event listener function itself, and various optional options that may affect the matching process;seeMatching event listeners for removal.

CallingremoveEventListener() with arguments that do not identify anycurrently registeredevent listener on theEventTarget has noeffect.

If anevent listener is removed from anEventTarget while another listener of the target is processing an event, it will not be triggered by the event. However, it can be reattached.

Warning:If a listener is registered twice, one with thecapture flag set and one without, you must remove each one separately. Removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa.

Event listeners can also be removed by passing anAbortSignal to anaddEventListener() and then later callingabort() on the controller owning the signal.

Syntax

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

Parameters

type

A string which specifies the type of event for which to remove an event listener.

listener

Theevent listener function of the event handler to remove from theevent target.

optionsOptional

An options object that specifies characteristics about the event listener.

The available options are:

capture: A boolean value that specifies whether theevent listener to be removed is registered as a capturing listener or not. If this parameter is absent, the default valuefalse is assumed.

useCaptureOptional

A boolean value that specifies whether theevent listener to be removed is registered as acapturing listener or not. If this parameter is absent, the default valuefalse is assumed.

Return value

None.

Matching event listeners for removal

Given an event listener previously added by callingaddEventListener(), you may eventuallycome to a point at which you need to remove it. Obviously, you need to specify the sametype andlistener parameters toremoveEventListener(). But what about theoptionsoruseCapture parameters?

WhileaddEventListener() will let you add the same listener more than oncefor the same type if the options are different, the only optionremoveEventListener() checks is thecapture/useCapture flag. Its value mustmatch forremoveEventListener() to match, but the other values don't.

For example, consider this call toaddEventListener():

element.addEventListener("mousedown", handleMouseDown, true);

Now consider each of these two calls toremoveEventListener():

element.removeEventListener("mousedown", handleMouseDown, false); // Failselement.removeEventListener("mousedown", handleMouseDown, true); // Succeeds

The first call fails because the value ofuseCapture doesn't match. Thesecond succeeds, sinceuseCapture matches up.

Now consider this:

element.addEventListener("mousedown", handleMouseDown, { passive: true });

Here, we specify anoptions object in whichpassive is set totrue, while the other options are left tothe default value offalse.

Now look at each of these calls toremoveEventListener() in turn. Any ofthem in whichcapture oruseCapture istrue fail; all others succeed.

Only thecapture setting matters toremoveEventListener().

element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeedselement.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succeedselement.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Failselement.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succeedselement.removeEventListener("mousedown", handleMouseDown, false); // Succeedselement.removeEventListener("mousedown", handleMouseDown, true); // Fails

It's worth noting that some browser releases have been inconsistent on this, and unlessyou have specific reasons otherwise, it's probably wise to use the same values used forthe call toaddEventListener() when callingremoveEventListener().

Example

This example shows how to add amouseover-based event listener thatremoves aclick-based event listener.

const body = document.querySelector("body");const clickTarget = document.getElementById("click-target");const mouseOverTarget = document.getElementById("mouse-over-target");let toggle = false;function makeBackgroundYellow() {  body.style.backgroundColor = toggle ? "white" : "yellow";  toggle = !toggle;}clickTarget.addEventListener("click", makeBackgroundYellow);mouseOverTarget.addEventListener("mouseover", () => {  clickTarget.removeEventListener("click", makeBackgroundYellow);});