javascript - Hur tar man bort alla lyssnare i ett element?

Jag har en knapp, och jag lade till några eventlistners på den:

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>

Jag kan ta bort dem genom att:

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

Vad händer om jag vill ta bort alla lyssnare på en gång, eller om jag inte har funktionsreferensen (funcA)? Finns det ett sätt att göra det, eller måste jag ta bort dem en efter en?

Svar #1

Jag tror att det snabbaste sättet att göra detta är att helt enkelt klona noden, vilket kommer att ta bort alla händelselyssnare:

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

Var bara försiktig, eftersom detta också kommer att rensa händelselyssnare på alla underordnade element till den aktuella noden, så om du vill bevara dem måste du ta till att explicit ta bort lyssnare en i taget.

Svar #2

Om du använder jquery-händelser kan detta göras på en rad:

För jQuery-händelser (.on()):

$("#myEl").off()

För inbyggda JavaScript-händelser (.addEventListener()):

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

Här är ett exempel:

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

Svar #3

Här är en funktion som också baseras på cloneNode, men med ett alternativ att bara klona föräldernoden och flytta alla barnen (för att bevara deras händelselyssnare):

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

Ta bort händelselyssnare på ett element:

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

Ta bort händelselyssnare på ett element och alla dess barn:

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

Om du behöver behålla själva objektet och därför inte kan använda cloneNode, måste du då omsluta addEventListener-funktionen och själv hålla reda på listan med lyssnare, som i detta svar.

Relaterade artiklar