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

我有一个button，我添加了一些事件列表：

 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 1.7+

 $("#myEl").off() 

jQuery <1.7

 $('#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函数并自己跟踪监听器列表，就像在这个答案中一样 。