webentwicklung-frage-antwort-db.com.de

Wie entferne ich alle Listener in einem Element?

Ich habe eine Schaltfläche und habe einige eventlistners 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 id="btn">button</button>

Ich kann sie entfernen, indem ich:

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

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

176

Ich denke, der schnellste Weg, dies zu tun, besteht darin, einfach den Knoten zu klonen, wodurch alle Ereignis-Listener entfernt werden:

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

Seien Sie jedoch vorsichtig, da hierdurch auch Ereignis-Listener für alle untergeordneten Elemente des betreffenden Knotens gelöscht werden. Wenn Sie also beibehalten möchten, müssen Sie explizit nacheinander Listener entfernen.

151
Ben D

Wenn Sie nicht gegen jquery sind, können Sie dies in einer Zeile tun:

jQuery 1.7 +

$("#myEl").off()

jQuery <1.7

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

Hier ist ein Beispiel:

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

34
Duke

Hier ist eine Funktion, die ebenfalls auf cloneNode basiert, aber eine Option zum Klonen nur des übergeordneten Knotens und zum Verschieben aller untergeordneten Knoten (um ihre Ereignis-Listener beizubehalten):

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

Entfernen Sie Ereignis-Listener für ein Element:

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

Entfernen Sie Ereignis-Listener für ein Element und alle untergeordneten Elemente:

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

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

10
user