¿Cómo eliminar a todos los oyentes en un elemento? [duplicar]
Tengo un botón y eventlistnersle agregué algunos:
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 mediante:
document.getElementById("btn").removeEventListener("click",funcA);
¿Qué sucede si quiero eliminar todos los oyentes a la vez o no tengo la referencia de función ( funcA)? ¿Hay alguna forma de hacerlo o tengo que eliminarlos uno por uno?
Creo que la forma más rápida de hacer esto es simplemente 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 borrará los detectores de eventos en todos los elementos secundarios del nodo en cuestión, por lo que si desea conservarlos, tendrá que recurrir a eliminar explícitamente los detectores uno a la vez.
Si estás usando eventos jquery, esto se puede hacer en una línea:
Para eventos jQuery ( .on()):
$("#myEl").off()
Para eventos de JavaScript nativo ( .addEventListener()):
$('#myEl').replaceWith($('#myEl').clone());
He aquí un ejemplo:
http://jsfiddle.net/LkfLezgd/3/
Aquí hay una función que también se basa en cloneNode, pero con una opción para clonar solo el nodo principal y mover todos los secundarios (para conservar sus detectores 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 detectores de eventos en un elemento:
recreateNode(document.getElementById("btn"));
Elimine los detectores de eventos en un elemento y todos sus hijos:
recreateNode(document.getElementById("list"), true);
Si necesita conservar el objeto en sí y, por lo tanto, no puede usarlo cloneNode, entonces debe ajustar la addEventListenerfunción y realizar un seguimiento de la lista de oyentes usted mismo, como en esta respuesta .
