Javascript / DOM: Como remover todos os events de um object DOM?

Apenas pergunta: Existe alguma maneira de remover completamente todos os events de um object, por exemplo, um div?

EDIT: estou adicionando por div.addEventListener('click',eventReturner(),false); um evento.

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

EDIT2: Eu encontrei uma maneira, que está funcionando, mas não é possível usar para o meu 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); } 

Não tenho a certeza do que queres dizer com remover todos os events . Remover todos os manipuladores para um tipo específico de evento ou todos os manipuladores de events para um tipo?

Remover todos os manipuladores de events

Se você quiser remover todos os manipuladores de events (de qualquer tipo), você pode clonar o elemento e substituí-lo por seu clone:

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

Nota: Isso preservará atributos e filhos, mas não preservará nenhuma alteração nas propriedades do DOM.


Remover manipuladores de events “anônimos” de tipo específico

A outra maneira é usar removeEventListener() mas eu acho que você já tentou isso e não funcionou. Aqui está o truque :

Chamar addEventListener para uma function anônima cria um novo ouvinte a cada vez. Chamar removeEventListener para uma function anônima não tem efeito . Uma function anônima cria um object único cada vez que é chamado, não é uma referência a um object existente, embora possa chamá-lo de um. Ao adicionar um ouvinte de evento dessa maneira, certifique-se de que ele seja adicionado apenas uma vez, ele é permanente (não pode ser removido) até que o object ao qual ele foi adicionado seja destruído.

Você está essencialmente passando uma function anônima para addEventListener como eventReturner retorna uma function.

Você tem que possibilites para resolver isso:

  1. Não use uma function que retorne uma function. Use a function diretamente:

     function handler() { dosomething(); } div.addEventListener('click',handler,false); 
  2. Crie um wrapper para addEventListener que armazene uma referência à function retornada e crie alguma function removeAllEvents estranha:

     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]); } } } } 

    E então você poderia usá-lo com:

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

DEMO

Nota: Se o seu código é executado por um longo tempo e você está criando e removendo muitos elementos, você teria que remover os elementos contidos em _eventHandlers quando você os destruir.

Use a function própria do ouvinte do evento remove() . Por exemplo:

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

Isso removerá todos os ouvintes de crianças, mas será lento para páginas grandes. Brutalmente simples de escrever.

 element.outerHTML = element.outerHTML; 

Como o corwin.amber diz, existem diferenças entre o Webkit e os outros.

No Chrome:

 getEventListeners(document); 

Que lhe dá um object com todos os ouvintes de events existentes:

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

A partir daqui, você pode acessar o ouvinte que deseja remover:

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

Então, todos os ouvintes do evento:

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

No Firefox

É um pouco diferente porque usa um wrapper de ouvinte que não contém nenhuma function de remoção. Você precisa obter o ouvinte que deseja remover:

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

Todos os ouvintes do evento:

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

Eu tropecei com este post tentando desativar a proteção contra cópia irritante de um site de notícias.

Apreciar!

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

//editar

Eu não sabia qual método você está usando para append events. Para addEventListener você pode usar isto:

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

mais detalhes

Pode ser que o navegador faça isso por você, se você fizer algo como:

Copie o div e seus atributos e insira-o antes do antigo, então mova o conteúdo do antigo para o novo e exclua o antigo?

Removendo todos os events no document :

Um forro:

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

Versão bonita:

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