DOM Eliminar oyentes de eventos


Ejemplo

El método removeEventListener () elimina los controladores de eventos que se han asociado con el método addEventListener ():

element.removeEventListener("mousemove", myFunction);

Todo (nombre de evento, función y opciones) en el removeEventListener debe coincidir con el conjunto al agregar el detector de eventos al elemento.

.bind con removeListener

el uso de .bind en la función al agregar un detector de eventos evitará que la función se elimine, para eliminar realmente el eventListener que puede escribir:

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

escuchar un evento solo una vez

Hasta que once opción sea ampliamente compatible, debemos eliminar manualmente la escucha par una vez que el evento se active por primera vez.

Este pequeño ayudante nos ayudará a lograr esto:

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* No es una buena práctica adjuntar funciones al prototipo de Objeto, por lo tanto, puede eliminar la primera línea de este código y agregarle un objetivo como primer parámetro.