Как удалить всех слушателей в элементе?

У меня есть кнопка, и я добавил ей 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>

Я могу удалить их:

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

Что делать, если я хочу, чтобы сразу удалить всех слушателей, или у меня нет ссылки на функцию (funcA)? Есть ли способ сделать это, или я должен удалить их один за другим?

Ответ 1

Я думаю, что самый быстрый способ сделать это - просто клонировать node, который удалит все прослушиватели событий:

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

Просто будьте осторожны, так как это также очистит прослушиватели событий во всех дочерних элементах node, поэтому, если вы хотите сохранить это, вам придется прибегать к явным удалению слушателей по одному за раз.

Ответ 2

Если вы не против jquery, это можно сделать в одной строке:

jQuery 1.7 +

$("#myEl").off()

jQuery < 1.7

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

Вот пример:

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

Ответ 3

Здесь функция, которая также основана на cloneNode, но с возможностью клонирования только родительского node и перемещения всех детей (для сохранения их прослушивателей событий):

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

Удалить прослушиватели событий по одному элементу:

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

Удалить прослушиватели событий для элемента и всех его дочерних элементов:

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

Если вам нужно сохранить сам объект и, следовательно, не можете использовать cloneNode, вам необходимо обернуть функцию addEventListener и отследить список слушателей самостоятельно, например, этот ответ.