web-dev-qa-db-fra.com

Comment supprimer tous les écouteurs d'un élément?

J'ai un bouton et j'y ai ajouté quelques eventlistners:

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>

Je peux les enlever par:

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

Et si je veux, je veux supprimer tous les écouteurs en même temps, ou je n'ai pas la référence de la fonction (funcA)? Y a-t-il un moyen de le faire ou dois-je les supprimer un par un?

javascriptjavascript-eventsaddeventlistener
176
Derek 朕會功夫

Je pense que le moyen le plus rapide de faire est de simplement cloner le nœud, ce qui supprimera tous les écouteurs d'événements:

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

Faites simplement attention, car cela effacera également les écouteurs d'événement sur tous les éléments enfants du nœud en question. Par conséquent, si vous souhaitez conserver cette information, vous devrez recourir à la suppression explicite des écouteurs, un à la fois.

151
Ben D

Si vous n’êtes pas opposé à jquery, vous pouvez le faire en une seule ligne:

jQuery 1.7 + 

$("#myEl").off()

jQuery <1.7 

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

Voici un exemple:

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

34
Duke

Voici une fonction également basée sur cloneNode, mais avec une option permettant de cloner uniquement le nœud parent et de déplacer tous les enfants (afin de préserver leurs écouteurs d'événement):

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

Supprimer les écouteurs d'événement sur un élément:

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

Supprimer des écouteurs d'événement sur un élément et tous ses enfants:

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

Si vous devez conserver l'objet lui-même et ne pouvez donc pas utiliser cloneNode, vous devez alors envelopper la fonction addEventListener et suivre vous-même la liste des écouteurs, comme dans cette réponse =.

10
user