EventTarget.removeEventListener()

Elimina el detector de evento previamente registrado EventTarget.addEventListener.

Sintaxis

target.removeEventListener(tipo, listener[, useCapture])

tipo

Un string representando el tipo de evento que se está eliminando.

listener

El parámetro listener indica la función EventListener a eliminar.

useCapture Optional

Especifica si el EventListener que se está eliminando fue registrado como un listener de captura o no. Si no se indica, por defecto useCapture será false.

Si un detector se registró dos veces, uno con captura y otro sin, cada uno debe ser eliminado por separado. La eliminación de un listener de captura no afecta a una versión de "no-captura" del mismo listener, y viceversa.

Notas

Si un EventListener es removido de un EventTarget cuando aún se está procesando el evento, no será ejecutado. Después de ser removido, un EventListener no será invocado por el evento al cual se registró, sin embargo se podrá adjuntar de nuevo a dicho evento.

Llamar removeEventListener  en algún EventTarget que no contenga el EventListener especificado será un acción sin efecto, es decir, se podrá llamar removeEventListener sin efectos negativos en los scripts.

Ejemplo

Este es un ejemplo en donde se agrega y después se elimina un EventListener 

var div = document.getElementById('div');
var listener = function (event) {
  /* Haz algo aquí */
};
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

Browser compatibility

Gecko notes

• Prior to Firefox 6, the browser would throw if the useCapture parameter was not explicitly false. Prior to Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), addEventListener() would throw an exception if the listener parameter was null; now the method returns without error, but without doing anything.

Opera notes

• Opera 12.00 will make the useCapture parameter optional (source)

WebKit notes

• Although WebKit has explicitly added [optional] to the useCapture parameter fairly recently, it had been working before the change. The new change landed in Safari 5.1 and Chrome 13.

See also

EventTarget.addEventListener().

Specification

• removeEventListener

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 use of addEventListener() and removeEventListener() in implementations which 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); }
    }
  };
}