funciones - obtener id de un elemento javascript

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

Question

Solo pregunta: ¿Hay alguna forma de eliminar por completo todos los eventos de un objeto, por ejemplo, un div?

EDITAR: Estoy agregando por div.addEventListener(''click'',eventReturner(),false); un evento.

function eventReturner() {
    return function() {
        dosomething();
    };
}

EDIT2: Encontré una forma, que funciona, pero que no es posible usar en mi caso:

var returnedFunction;
function addit() {
    var div = document.getElementById(''div'');
    returnedFunction = eventReturner();
    div.addEventListener(''click'',returnedFunction,false); //You HAVE to take here a var and not the direct call to eventReturner(), because the function address must be the same, and it would change, if the function was called again.
}
function removeit() {
    var div = document.getElementById(''div'');
    div.removeEventListener(''click'',returnedFunction,false);
}

Answer 1

Como dice corwin.amber, existen diferencias entre Webkit y otros.

En Chrome:

getEventListeners(document);

Lo que le proporciona un Objeto con todos los oyentes de eventos existentes:

Object 
 click: Array[1]
 closePopups: Array[1]
 keyup: Array[1]
 mouseout: Array[1]
 mouseover: Array[1]
 ...

Desde aquí puede comunicarse con el oyente que desea eliminar:

getEventListeners(document).copy[0].remove();

Entonces, todos los oyentes del evento:

for(var eventType in getEventListeners(document)) {
   getEventListeners(document)[eventType].forEach(
      function(o) { o.remove(); }
   ) 
}

En Firefox

Es un poco diferente porque usa un contenedor de oyentes que no contiene ninguna función de eliminación. Tienes que obtener el oyente que deseas eliminar:

document.removeEventListener("copy", getEventListeners(document).copy[0].listener)

Todos los oyentes del evento:

for(var eventType in getEventListeners(document)) {
  getEventListeners(document)[eventType].forEach(
    function(o) { document.removeEventListener(eventType, o.listener) }
  ) 
}

Me encontré con esta publicación tratando de desactivar la molesta protección contra copia de un sitio web de noticias.

¡Disfrutar!

Answer 2

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

element.outerHTML = element.outerHTML;

Answer 3

No estoy seguro de lo que quieres decir con eliminar todos los eventos . ¿Quitar 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 clone el elemento y reemplazarlo con su clon:

var clone = element.cloneNode();
while (element.firstChild) {
  clone.appendChild(element.lastChild);
}
element.parentNode.replaceChild(clone, element);

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

Eliminar los controladores de eventos "anónimos" de tipo específico

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

Llamar a addEventListener a una función anónima crea un nuevo oyente cada vez. Llamar a removeEventListener a una función anónima no tiene ningún 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á pasando una función anónima a addEventListener ya que eventReturner devuelve una función.

Tienes que posibilidades de resolver esto:

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

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

2. Cree un contenedor para addEventListener que almacene una referencia a la función devuelta y cree una extraña función removeAllEvents :

   var _eventHandlers = {}; // somewhere global
   
   function addListener(node, event, handler, capture) {
       if(!(node in _eventHandlers)) {
           // _eventHandlers stores references to nodes
           _eventHandlers[node] = {};
       }
       if(!(event in _eventHandlers[node])) {
           // each entry contains another entry for each event type
           _eventHandlers[node][event] = [];
       }
       // capture reference
       _eventHandlers[node][event].push([handler, capture]);
       node.addEventListener(event, handler, capture);
    }
   
   function removeAllListeners(node, event) {
       if(node in _eventHandlers) {
           var handlers = _eventHandlers[node];
           if(event in handlers) {
               var eventHandlers = handlers[event];
               for(var i = eventHandlers.length; i--;) {
                   var handler = eventHandlers[i];
                   node.removeEventListener(event, handler[0], handler[1]);
               }
           }
       }
   }

   Y luego podrías usarlo con:

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

DEMO

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

Answer 4

Puede ser que el navegador lo haga por usted si hace algo como:

Copie el div y sus atributos e insértelo antes del anterior, luego mueva el contenido del antiguo al nuevo y elimine el anterior.

Answer 5

Use la función del oyente del evento remove() . Por ejemplo:

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

Answer 6

Eliminando todos los eventos en el document :

Un trazador de líneas:

for (key in getEventListeners(document)) { getEventListeners(document)[key].forEach(function(c) { c.remove() }) }

Versión bonita:

for (key in getEventListeners(document)) {
  getEventListeners(document)[key].forEach(function(c) {
    c.remove()
  })   
}

Answer 7

var div = getElementsByTagName(''div'')[0]; /* first div found; you can use getElementById for more specific element */
div.onclick = null; // OR:
div.onclick = function(){};

//editar

No sabía qué método estás usando para adjuntar eventos. Para addEventListener puedes usar esto:

div.removeEventListener(''click'',functionName,false); // functionName is the name of your callback function

more removeEventListener()