EventTarget.removeEventListener

  • Revision slug: DOM/element.removeEventListener
  • Revision title: element.removeEventListener
  • Revision id: 57384
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 1 words added, 53 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.

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. {{ domxref("EventListener") }}s 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>
<p>if (!Element.prototype.addEventListener) {</p>
<br>
<p>  var oListeners = {};</p>
<br>
<p>  function runListeners(oEvent) {</p>
<br>
<p>    if (!oEvent) { oEvent = window.event; }</p>
<br>
<p>    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {</p>
<br>
<p>      if (oEvtListeners.aEls[iElId] === this) {</p>
<br>
<p>        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }</p>
<br>
<p>        break;</p>
<br>
<p>      }</p>
<br>
<p>    }</p>
<br>
<p>  }</p>
<br>
<p>  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {</p>
<br>
<p>    if (oListeners.hasOwnProperty(sEventType)) {</p>
<br>
<p>      var oEvtListeners = oListeners[sEventType];</p>
<br>
<p>      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {</p>
<br>
<p>        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }</p>
<br>
<p>      }</p>
<br>
<p>      if (nElIdx === -1) {</p>
<br>
<p>        oEvtListeners.aEls.push(this);</p>
<br>
<p>        oEvtListeners.aEvts.push([fListener]);</p>
<br>
<p>        this["on" + sEventType] = runListeners;</p>
<br>
<p>      } else {</p>
<br>
<p>        var aElListeners = oEvtListeners.aEvts[nElIdx];</p>
<br>
<p>        if (this["on" + sEventType] !== runListeners) {</p>
<br>
<p>          aElListeners.splice(0);</p>
<br>
<p>          this["on" + sEventType] = runListeners;</p>
<br>
<p>        }</p>
<br>
<p>        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {</p>
<br>
<p>          if (aElListeners[iLstId] === fListener) { return; }</p>
<br>
<p>        }     </p>
<br>
<p>        aElListeners.push(fListener);</p>
<br>
<p>      }</p>
<br>
<p>    } else {</p>
<br>
<p>      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };</p>
<br>
<p>      this["on" + sEventType] = runListeners;</p>
<br>
<p>    }</p>
<br>
<p>  };</p>
<br>
<p>  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {</p>
<br>
<p>    if (!oListeners.hasOwnProperty(sEventType)) { return; }</p>
<br>
<p>    var oEvtListeners = oListeners[sEventType];</p>
<br>
<p>    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {</p>
<br>
<p>      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }</p>
<br>
<p>    }</p>
<br>
<p>    if (nElIdx === -1) { return; }</p>
<br>
<p>    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {</p>
<br>
<p>      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }</p>
<br>
<p>    }</p>
<br>
<p>  };</p>
<br>
<p>}</p><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. {{ domxref("EventListener") }}s 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