The EventTarget.removeEventListener()
method removes from the EventTarget
an event listener previously registered with EventTarget.addEventListener()
. 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; see Matching event listeners for removal
Syntax
target.removeEventListener(type, listener[, options]); target.removeEventListener(type, listener[, useCapture]);
Parameters
type
- A string which specifies the type of event for which to remove an event listener.
listener
- The
EventListener
function of the event handler to remove from the event target. options
Optional-
An options object that specifies characteristics about the event listener.
The available options are:
capture
: ABoolean
which indicates that events of this type will be dispatched to the registeredlistener
before being dispatched to anyEventTarget
beneath it in the DOM tree.-
mozSystemGroup
: Available only in code running in XBL or in Firefox' chrome, it is aBoolean
defining if the listener is added to the system group.
useCapture
Optional- Specifies whether the
EventListener
to be removed is registered as a capturing listener or not. If this parameter is absent, a default value offalse
is assumed. - If a listener is registered twice, one with capture and one without, remove each one separately. Removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa.
Return value
Matching event listeners for removal
Given an event listener previously added by calling addEventListener()
, you may eventually come to a point at which you need to remove it. Obviously, you need to specify the same type
and listener
parameters to removeEventListener()
. But what about the options
or useCapture
parameters?
While addEventListener()
will let you add the same listener more than once for the same type if the options are different, the only option removeEventListener()
checks is the capture
/useCapture
flag. Its value must match for removeEventListener()
to match, but the other values don't.
For example, consider this call to addEventListener()
:
element.addEventListener("mousedown", handleMouseDown, true);
Now consider each of these two calls to removeEventListener()
:
element.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds
The first call fails because the value of useCapture
doesn't match. The second succeeds, since useCapture
matches up.
Now consider this:
element.addEventListener("mousedown", handleMouseDown, { passive: true });
Here, we specify an options
object in which passive
is set to true
, while the other options are left to the default value of false
.
Now look at each of these calls to removeEventListener()
in turn. Any of them in which capture
or useCapture
is true
fail; all others succeed.
Only the capture
setting matters to removeEventListener()
.
element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Fails element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, false); // Succeeds element.removeEventListener("mousedown", handleMouseDown, true); // Fails
It's worth noting that some browser releases have been inconsistent on this, and unless you have specific reasons otherwise, it's probably wise to use the same values used for the call to addEventListener()
when calling removeEventListener()
.
Notes
If an EventListener
is removed from an EventTarget
while it is processing an event, it will not be triggered by the current actions. An EventListener
will not be invoked for the event it was registered for after being removed. However, it can be reattached.
Calling removeEventListener()
with arguments that do not identify any currently registered EventListener
on the EventTarget
has no effect.
Example
This example shows how to add a mouseover
-based event listener that removes a click
-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() { if (toggle) { body.style.backgroundColor = 'white'; } else { body.style.backgroundColor = 'yellow'; } toggle = !toggle; } clickTarget.addEventListener('click', makeBackgroundYellow, false ); mouseOverTarget.addEventListener('mouseover', function () { clickTarget.removeEventListener('click', makeBackgroundYellow, false ); });
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'EventTarget.removeEventListener()' in that specification. |
Living Standard | |
DOM4 The definition of 'EventTarget.removeEventListener()' in that specification. |
Obsolete | |
Document Object Model (DOM) Level 2 Events Specification The definition of 'EventTarget.removeEventListener()' in that specification. |
Obsolete | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
removeEventListener | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE
Full support
9
| Opera Full support 7 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
type and listener parameters optional. | Chrome No support 1 — 49 | Edge No support 12 — 79 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android No support 1 — 49 | Chrome Android No support 18 — 49 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android No support 1.0 — 5.0 |
useCapture parameter optional | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 6 | IE Full support 9 | Opera Full support 11.6 | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 12 | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
Form with options object supported (third parameter can be either options or a Boolean , for backwards compatibility) | Chrome Full support 49 | Edge Full support ≤18 | Firefox Full support 49 | IE No support No | Opera Full support Yes | Safari Full support 10 | WebView Android Full support 49 | Chrome Android Full support 49 | Firefox Android Full support 49 | Opera Android Full support Yes | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- Uses a non-standard name.
- Uses a non-standard name.
Polyfill to support older browsers
addEventListener()
and removeEventListener()
are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing the use of addEventListener()
and removeEventListener()
in implementations that do not natively support it. However, this method will not work on Internet Explorer 7 or earlier, since extending the Element.prototype
was not supported until Internet Explorer 8.
if (!Element.prototype.addEventListener) { var oListeners = {}; function runListeners(oEvent) { if (!oEvent) { oEvent = window.event; } for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) { if (oEvtListeners.aEls[iElId] === this) { for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); } break; } } } Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) { if (oListeners.hasOwnProperty(sEventType)) { var oEvtListeners = oListeners[sEventType]; for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) { if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; } } if (nElIdx === -1) { oEvtListeners.aEls.push(this); oEvtListeners.aEvts.push([fListener]); this["on" + sEventType] = runListeners; } else { var aElListeners = oEvtListeners.aEvts[nElIdx]; if (this["on" + sEventType] !== runListeners) { aElListeners.splice(0); this["on" + sEventType] = runListeners; } for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) { if (aElListeners[iLstId] === fListener) { return; } } aElListeners.push(fListener); } } else { oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] }; this["on" + sEventType] = runListeners; } }; Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) { if (!oListeners.hasOwnProperty(sEventType)) { return; } var oEvtListeners = oListeners[sEventType]; for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) { if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; } } if (nElIdx === -1) { return; } for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) { if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); } } }; }