如何删除元素中的所有侦听器?

我有一个按钮，我添加了一些事件列表到它:

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)怎么办?有什么办法吗，还是我得一个一个把它们去掉?

当前回答

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

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

只是要小心，因为这也将清除有关节点的所有子元素上的事件侦听器，所以如果您想保留它，就必须采用一次显式删除一个侦听器的方法。

2012-02-12 19:21:19

其他回答

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

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

只是要小心，因为这也将清除有关节点的所有子元素上的事件侦听器，所以如果您想保留它，就必须采用一次显式删除一个侦听器的方法。

2012-02-12 19:21:19

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

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

$("#myEl").off()

对于本地javascript事件(.addEventListener()):

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

这里有一个例子:

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

2015-02-06 21:25:17

下面是一个同样基于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函数并自行跟踪侦听器列表，就像下面的回答一样。

2016-01-09 12:13:25

如何删除元素中的所有侦听器?

推荐文章

最新文章

标签