如何删除元素中的所有侦听器？ [复制]

Question

我有一个按钮，我在上面添加了一些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)，该怎么办？有没有办法做到这一点，或者我必须一个一个删除它们？

Answer 1

我认为最快的方法是克隆节点，这将删除所有事件侦听器：

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

请小心，因为这也会清除相关节点的所有子元素上的事件侦听器，因此如果您想保留它，您必须一次明确地移除一个侦听器。

Answer 2

如果你使用 jquery 事件，这可以在一行中完成：

对于 jQuery 事件 (.on())：

$("#myEl").off()

对于原生 javascript 事件 (.addEventListener())：

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

这是一个例子：

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

Answer 3

这是一个同样基于 cloneNode 的函数，但可以选择仅克隆父节点并移动所有子节点（以保留其事件侦听器）：

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 函数并自己跟踪侦听器列表，例如this answer。