EventTarget.removeEventListener()

Sintaxis

target.removeEventListener(type, listener[, options]);
target.removeEventListener(tipo, listener[, useCapture])

Parmetros

tipo

Un string representando el tipo de evento del que se est removiendo un detector de evento.

detector (listener)

La funcin EventListener del manejador de evento a eliminar del objetivo del evento.

options Opcional

Un objeto que especifca diversas caractersticas acerca del detector de eventos. Las opciones disponibles son:

• capture: Un Boolean que indica que eventos de este tipo sern enviados al listener antes de ser enviado a cualquier EventTarget debado de ste en el DOM.

useCapture Opcional

Especifca si el EventListener que se est eliminando fue registrado como un detector de captura o no. Si no se indica, por defecto useCapture asumir el valor false.

Si un detector se registro dos veces, uno con captura y otro sin, cada uno debe ser eliminado por separado. La eliminacin de un detector de captura no afecta a una versin de "no-captura" del mismo detector, y viceversa.

Valor de retorno

undefined.

Coincidiendo disparadores de evento para su eliminacin

Habiendose aadido detector de evento llamando addEventListener(), puede llegar un punto donde se requiera eliminar. Obviamente, se necesita especificar los mismos parmetros de tipo y listener a removeEventListener(), pero que hay acerca de los parmetros de options o de useCapture?

Mientras addEventListener() permite aadir el mismo detector ms de una vez para el mismo tipo, si la opcin es diferente, la nica opcin que removeEventListener() revisar es la bandera de capture/useCapture. Su valor debe coincidir con removeEventListener() para coincidir, pero otros valores no necesitan corresponder.

Por ejemplo, considerar la siguiente llamada a addEventListener():

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

Ahora, considera removeEventListener():

element.removeEventListener("mousedown", handleMouseDown, false); // Fallo
element.removeEventListener("mousedown", handleMouseDown, true); // xito

La primera llamada falla porque el valor de useCapture no coincide. El segundo valor funciona, puesto que useCapture es igual a su valor cuando se aadi el detector.

Ahora considera lo siguiente:

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

Aqui, especificamos un objeto options en el cual passive esta definido como true, mientras que otras opciones son dejados con su valor por defecto de false.

Vea consecutivamente, cada una de las siguientes llamadas a removeEventListener(). Cualquiera de stas donde capture o useCapture es true falla; en todas las dems funciona. Solo la configuracin capture importa a removeEventListener().

element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Funciona
element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Funciona
element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Falla
element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Funciona
element.removeEventListener("mousedown", handleMouseDown, false); // Funciona
element.removeEventListener("mousedown", handleMouseDown, true); // Falla

Vale la pena mencionar que algunos navegadores tienen un comportamiento inconsistente, y a menos que se tengan razones especficas, es probablemente una buena idea usar los mismos valores usados por la llamada a addEventListener() al momento de utilizar removeEventListener().

Notas

Si un EventListener es removido de un EventTarget cuando an se est procesando el evento, no ser ejecutado. Despus 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 <code>removeEventListener</code> en algn EventTarget que no contenga el EventListener especificado ser un accin sin efecto, es decir, se podr llamar <code>removeEventListener</code> sin efectos negativos en los scripts.

Ejemplo

Este es un ejemplo en donde se agrega y despus se elimina un EventListener

var body = document.querySelector("body"),
  clickTarget = document.getElementById("click-target"),
  mouseOverTarget = document.getElementById("mouse-over-target"),
  toggle = false;

function makeBackgroundYellow() {
  "use strict";

  if (toggle) {
    body.style.backgroundColor = "white";
  } else {
    body.style.backgroundColor = "yellow";
  }

  toggle = !toggle;
}

clickTarget.addEventListener("click", makeBackgroundYellow, false);

mouseOverTarget.addEventListener("mouseover", function () {
  "use strict";

  clickTarget.removeEventListener("click", makeBackgroundYellow, false);
});

Especificaciones

Compatibilidad con navegadores

Ver tambin

• EventTarget.addEventListener().
• EventTarget.detachEvent().