Javascript / DOM: ¿Cómo eliminar todos los eventos de un objeto DOM?

Solución:

No estoy seguro de a qué te refieres con retirar todos eventos. ¿Eliminar todos los controladores para un tipo específico de evento o todos los controladores de eventos para un tipo?

Eliminar todos los controladores de eventos

Si desea eliminar todos los controladores de eventos (de cualquier tipo), puede clon el elemento y reemplazarlo con su clon:

var clone = element.cloneNode(true);

Nota: Esto conservará los atributos y los hijos, pero no conservará ningún cambio en las propiedades del DOM.

---

Eliminar controladores de eventos “anónimos” de un tipo específico

La otra forma es usar removeEventListener() pero supongo que ya lo intentaste y no funcionó. Aquí está el truco:

Vocación addEventListener a una función anónima crea un nuevo oyente cada vez. Vocación removeEventListener a una función anónima no tiene efecto. Una función anónima crea un objeto único cada vez que se llama, no es una referencia a un objeto existente, aunque puede llamar a uno. Al agregar un detector de eventos de esta manera, asegúrese de que se agregue solo una vez, es permanente (no se puede eliminar) hasta que se destruya el objeto al que se agregó.

Básicamente, estás pasando una función anónima a addEventListener como eventReturner devuelve una función.

Tienes dos posibilidades para solucionar esto:

1. No use una función que devuelva una función. Utilice la función directamente:

    function handler() {
        dosomething();
    }
   
    div.addEventListener('click',handler,false);
   

2. Crea una envoltura para addEventListener que almacena una referencia a la función devuelta y crea algunos extraños removeAllEvents función:

    var _eventHandlers = {}; // somewhere global
   
    const addListener = (node, event, handler, capture = false) => {
      if (!(event in _eventHandlers)) {
        _eventHandlers[event] = []
      }
      // here we track the events and their nodes (note that we cannot
      // use node as Object keys, as they'd get coerced into a string
      _eventHandlers[event].push({ node: node, handler: handler, capture: capture })
      node.addEventListener(event, handler, capture)
    }
   
    const removeAllListeners = (targetNode, event) => {
      // remove listeners from the matching nodes
      _eventHandlers[event]
        .filter(({ node }) => node === targetNode)
        .forEach(({ node, handler, capture }) => node.removeEventListener(event, handler, capture))
   
      // update _eventHandlers global
      _eventHandlers[event] = _eventHandlers[event].filter(
        ({ node }) => node !== targetNode,
      )
    }
   

Y luego podrías usarlo con:

    addListener(div, 'click', eventReturner(), false)
    // and later
    removeAllListeners(div, 'click')

MANIFESTACIÓN

Nota: Si su código se ejecuta durante mucho tiempo y está creando y eliminando muchos elementos, debería asegurarse de eliminar los elementos contenidos en _eventHandlers cuando los destruyas.

Esto eliminará todos los oyentes de los niños, pero será lento para páginas grandes. Brutalmente simple de escribir.

element.outerHTML = element.outerHTML;

Utilice la función propia del oyente de eventos remove(). Por ejemplo:

getEventListeners().click.forEach((e)=>{e.remove()})

---

---

Utiliza Nuestro Buscador