Wie entfernt man alle Listener in einem Element?

Question

Ich habe einen Button und habe einige Eventlistener hinzugefügt:

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

Ich kann sie entfernen, indem ich:

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

Was ist, wenn ich alle Listener auf einmal entfernen möchte oder ich keine Funktionsreferenz (funcA) habe? Gibt es eine Möglichkeit, das zu tun, oder muss ich sie einzeln entfernen?

Answer 1

Ich denke, der schnellste Weg, dies zu tun, ist einfach, den Knoten zu klonen, was alle Ereignislistener entfernt:

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

Sei einfach vorsichtig, da dies auch alle Ereignislistener auf allen untergeordneten Elementen des betreffenden Knotens löscht, also wenn du das bewahren möchtest, musst du darauf zurückgreifen, die Listener einzeln zu entfernen.

Answer 2

Wenn Sie jQuery-Ereignisse verwenden, kann dies in einer Zeile erledigt werden:

Für jQuery-Ereignisse (.on()):

$("#myEl").off()

Für native JavaScript-Ereignisse (.addEventListener()):

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

Hier ist ein Beispiel:

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

Answer 3

Hier ist eine Funktion, die auch auf cloneNode basiert, aber eine Option bietet, nur den Elternknoten zu klonen und alle Kinder zu verschieben (um ihre Eventlistener zu erhalten):

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

Eventlistener von einem Element entfernen:

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

Eventlistener von einem Element und all seinen Kindern entfernen:

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

---

Wenn Sie das Objekt selbst behalten müssen und daher nicht cloneNode verwenden können, müssen Sie die addEventListener-Funktion einpacken und die Listener-Liste selbst verfolgen, wie in dieser Antwort.