JavaScript Eliminar todos los detectores de eventos

La publicación de hoy enseñará cómo eliminar todos los detectores de eventos en JavaScript.

Eliminar todos los detectores de eventos en JavaScript

El método addEventListener() de la interfaz EventTarget configura una función para ser llamada cada vez que el evento especificado se entrega al objetivo.

El método addEventListener() funciona agregando una función u objeto que implementa el EventListener a la lista de detectores de eventos para el tipo de evento especificado en el EventTarget para el que se llama.

Si la función o el objeto ya está en la lista de detectores de eventos para ese destino, la función o el objeto no se agrega por segunda vez.

El método removeEventListener() de la interfaz EventTarget elimina un detector de eventos que se registró previamente del objetivo mediante EventTarget.addEventListener().

Llamar a removeEventListener() con argumentos que no identifican un EventListener actualmente registrado en el EventTarget no tiene ningún efecto.

El evento no se enviará si se elimina un EventListener de un EventTarget mientras otro oyente en el objetivo está procesando un evento. Sin embargo, se puede cambiar de posición.

Llamar a removeEventListener es fácil si solo uno o dos oyentes están registrados para elementos específicos. ¿Qué pasa si hay más de 10 detectores registrados y desea eliminar todos los detectores de eventos?

Requerirá esfuerzo; aprenderemos otro método para realizar esta tediosa operación para superar esto.

Veamos el ejemplo a continuación.

<div>
<button id="grt-btn">Hello World!</button>
<button onclick="removeListeners()">Remove listeners</button>
</div>

document.getElementById('grt-btn').addEventListener(
    'click', () => {console.log('firstClick')}, false);
document.getElementById('grt-btn').addEventListener(
    'blur', () => {console.log('Blur event')}, false);
document.getElementById('grt-btn').addEventListener(
    'focus', () => {console.log('focus event')}, false);

function removeListeners() {
  const oldBtnElement = document.getElementById('grt-btn');
  const newBtnElement = oldBtnElement.cloneNode(true);
  oldBtnElement.parentNode.replaceChild(newBtnElement, oldBtnElement);
  console.log('Removed all listners')
}

En el ejemplo anterior, hemos definido 2 botones. El primer botón es el que le adjuntará oyentes.

El segundo botón es el que eliminará a los oyentes del primer botón.

Hemos definido tres detectores de eventos; tan pronto como haga clic en el botón Hello World, activará los eventos focus y click. Intente navegar a otra pestaña; activará el evento desenfoque.

Y finalmente, haga clic en el botón Eliminar oyentes, que clonará el botón Hello World. El paso final es reemplazar el nodo secundario del elemento div con cloneNode.

Esto eliminará automáticamente todos los detectores de eventos asociados con el botón anterior.

Si intenta hacer clic en el botón Hello World nuevamente, no activará ningún evento.

Producción :

"focus event"
"firstClick"
"Blur event"
"focus event"
"Blur event"
"Removed all listeners"

Demostración aquí