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

javascript dom-events addeventlistener

2022-08-30 00:19:59

我有一个按钮，我添加了一些按钮：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

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

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

请注意，因为这也会清除相关节点的所有子元素上的事件侦听器，因此，如果要保留该侦听器，则必须一次显式删除一个侦听器。

答案 2

如果您使用的是 jquery 事件，则可以在一行中完成此操作：

对于 jQuery events （.on（））：

$("#myEl").off()

对于原生 javascript events （.addEventListener（））：

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

下面是一个示例：

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