EventTarget.removeEventListener

  • Revision slug: DOM/element.removeEventListener
  • Revision title: element.removeEventListener
  • Revision id: 57387
  • Created:
  • Creator: jerone
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

{{ DomRef() }}

Summary

removeEventListener() allows the removal of event listeners from the event target.

Syntax

element.removeEventListener(type, listener, useCapture) 

Parameters

type 
A string representing the event type being removed.
listener 
The listener parameter indicates the {{ domxref("EventListener") }} function to be removed.
useCapture {{ optional_inline() }}
Specifies whether the {{ domxref("EventListener") }} being removed was registered as a capturing listener or not. If a listener was registered twice, one with capture and one without, each must be removed separately. Removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa.
Note: useCapture became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide that parameter for broadest compatibility.

Compatibility

addEventListener() and removeEventListener() are a recent addition to the standard; as such they may not be present in all browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of addEventListener() and removeEventListener() in implementations which do not natively support it.

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); }
    }
  };
}

Example

This is an example of adding and then removing an event listener.

var div = document.getElementById('div');
var listener = function (event) {
  /* do something here */
};
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

Notes

If an {{ domxref("EventListener") }} is removed from an {{ domxref("EventTarget") }} while it is processing an event, it will not be triggered by the current actions. An {{ domxref("EventListener") }} can never be invoked after being removed. Calling removeEventListener() with arguments which do not identify any currently registered {{ domxref("EventListener") }} on the EventTarget has no effect. See also {{ domxref("element.addEventListener()") }}.

Specification

{{ languages( { "fr": "fr/DOM/element.removeEventListener", "ja": "ja/DOM/element.removeEventListener", "pl": "pl/DOM/element.removeEventListener" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p><code><strong>removeEventListener()</strong></code> allows the removal of event listeners from the event target.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">element.removeEventListener(<em>type</em>, <em>listener</em>, <em>useCapture</em>) 
</pre>
<h3 name="Parameters">Parameters</h3>
<dl> <dt><code>type</code> </dt> <dd>A string representing the event type being removed.</dd> <dt><code>listener</code> </dt> <dd>The <code>listener </code>parameter indicates the {{ domxref("EventListener") }} function to be removed.</dd> <dt><code>useCapture</code> {{ optional_inline() }}</dt> <dd>Specifies whether the {{ domxref("EventListener") }} being removed was registered as a capturing listener or not. If a listener was registered twice, one with capture and one without, each must be removed separately. Removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa.</dd>
</dl>
<div class="note"><strong>Note:</strong> <code>useCapture</code> became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide that parameter for broadest compatibility.</div>
<h3 name="Compatibility">Compatibility</h3>
<p><code>addEventListener()</code> and <code>removeEventListener()</code> are a recent addition to the standard; as such they may not be present in all browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>addEventListener()</code> and <code>removeEventListener()</code> in implementations which do not natively support it.</p>
<pre class="brush: js">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 &lt; oEvtListeners.aEls.length; iElId++) {
      if (oEvtListeners.aEls[iElId] === this) {
        for (iLstId; iLstId &lt; 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 &lt; 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 &lt; 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 &lt; 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 &lt; aElListeners.length; iLstId++) {
      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
    }
  };
}
</pre><h3 name="Example">Example</h3>
<p>This is an example of adding and then removing an event listener.</p>
<pre class="brush: js">var div = document.getElementById('div');
var listener = function (event) {
  /* do something here */
};
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);
</pre>
<h3 name="Notes">Notes</h3>
<p>If an {{ domxref("EventListener") }} is removed from an {{ domxref("EventTarget") }} while it is processing an event, it will not be triggered by the current actions. An {{ domxref("EventListener") }} can never be invoked after being removed. Calling <code>removeEventListener()</code> with arguments which do not identify any currently registered {{ domxref("EventListener") }} on the EventTarget has no effect. See also {{ domxref("element.addEventListener()") }}.</p><h3 name="Specification">Specification</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-removeEventListener">removeEventListener </a></li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/element.removeEventListener", "ja": "ja/DOM/element.removeEventListener", "pl": "pl/DOM/element.removeEventListener" } ) }}</p>
Revert to this revision