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

2020/10/14 19:41 · javascript ·  · 0评论

我有一个按钮,并添加了一些按钮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)怎么办?有没有办法做到这一点,或者我必须一个一个地删除它们?

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

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

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

如果您不反对jquery,则可以在一行中完成:

jQuery 1.7以上

$("#myEl").off()

jQuery <1.7

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

这是一个例子:

http://jsfiddle.net/LkfLezgd/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函数并自己跟踪侦听器列表,例如此答案

本文地址:http://javascript.askforanswer.com/ruheshanchuyuansuzhongdesuoyouzhentingqizhongfu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!