javascript - tabla - ¿Cómo eliminar a todos los oyentes en un elemento?

limpiar una tabla con js

Question

Esta pregunta ya tiene una respuesta aquí:

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

Tengo un botón y agregué algunos eventlistners a él:

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>

Puedo eliminarlos por:

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

¿Qué sucede si deseo eliminar todos los oyentes a la vez, o no tengo la referencia de función ( funcA )? ¿Hay alguna manera de hacerlo, o tengo que eliminarlos uno por uno?

Answer 1

Aquí hay una función que también está basada en cloneNode , pero con una opción para clonar solo el nodo padre y mover todos los elementos cloneNode (para preservar sus escuchas de eventos):

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

Eliminar los detectores de eventos en un elemento:

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

Elimina los detectores de eventos en un elemento y todos sus elementos secundarios:

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

Si necesita conservar el objeto en sí mismo y, por lo tanto, no puede usar cloneNode , debe ajustar la función addEventListener y realizar un seguimiento de la lista de escucha usted mismo, como en esta respuesta .

Answer 2

Creo que la forma más rápida de hacerlo es clonar el nodo, lo que eliminará todos los detectores de eventos:

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

Solo tenga cuidado, ya que esto también liberará a los oyentes del evento en todos los elementos secundarios del nodo en cuestión, por lo que si desea preservarlo, tendrá que recurrir a la eliminación explícita de oyentes de uno en uno.

Answer 3

Si no se opone a jquery, esto se puede hacer en una línea:

jQuery 1.7+

$("#myEl").off()

jQuery <1.7

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

Aquí hay un ejemplo:

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