Pesquisa de site

javascript - Como remover todos os listeners em um elemento?

Eu tenho um botão, e adicionei alguns eventlistners a ele:

document.getElementById("btn").addEventListener("click", funcA, false);
document.getElementById("btn").addEventListener("click", funcB, false);
document.getElementById("btn").addEventListener("click", funcC, false);
document.getElementById("btn").addEventListener("blur" , funcD, false);
document.getElementById("btn").addEventListener("focus", funcE, false);

<button id="btn">button</button>

Eu posso removê-los por:

document.getElementById("btn").removeEventListener("click",funcA);

E se eu quiser remover todos os listeners de uma vez, ou eu não tiver a referência da função (funcA)? Existe uma maneira de fazer isso, ou eu tenho que removê-los um por um?

Resposta #1

Acho que a maneira mais rápida de fazer isso é simplesmente clonar o nó, o que removerá todos os ouvintes de eventos:

var old_element = document.getElementById("btn");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);

Apenas tenha cuidado, pois isso também limpará os ouvintes de eventos em todos os elementos filhos do nó em questão, então se você quiser preservar isso, terá que recorrer a remover os ouvintes explicitamente, um de cada vez.

Resposta #2

Se você estiver usando eventos do jQuery, isso pode ser feito em uma linha:

Para eventos jQuery (.on()):

$("#myEl").off()

Para eventos nativos do javascript (.addEventListener()):

$('#myEl').replaceWith($('#myEl').clone());

Aqui está um exemplo:

http://jsfiddle.net/LkfLezgd/3/

Resposta #3

Aqui está uma função que também é baseada em cloneNode, mas com uma opção para clonar apenas o nó pai e mover todos os filhos (para preservar os event listeners deles):

function recreateNode(el, withChildren) {
  if (withChildren) {
    el.parentNode.replaceChild(el.cloneNode(true), el);
  }
  else {
    var newEl = el.cloneNode(false);
    while (el.hasChildNodes()) newEl.appendChild(el.firstChild);
    el.parentNode.replaceChild(newEl, el);
  }
}

Remover ouvintes de eventos em um elemento:

recreateNode(document.getElementById("btn"));

Remova os ouvintes de eventos em um elemento e em todos os seus filhos:

recreateNode(document.getElementById("list"), true);

Se você precisa manter o próprio objeto e, portanto, não pode usar cloneNode, então você tem que envolver a função addEventListener e rastrear a lista de listeners por conta própria, como nesta resposta.

Artigos relacionados