如何在Javascript中解除按钮上现有单击事件的绑定并将其替换为新事件

基本上我想做的是：

我克隆了一个按钮，并用克隆的按钮隐藏现有按钮。我想在克隆按钮上绑定一个新函数，并删除以前的事件

我已尝试removeEventListener（），但没有成功

我分享了一段代码，以便更好地理解

let formSelector = document.querySelectorAll('form[action="/cart/add"]');
formSelector.forEach(function(e) {
e.setAttribute("data-plusbooster-offer", true);
let addToCart__button = e.querySelectorAll('[name="add"]') 
                      || e.querySelectorAll('[type="submit"]') 
                      || e.querySelectorAll(__addToCart__class__static);


addToCart__button.forEach(function(response) {
    let cloneBtn = response.cloneNode(true);
    cloneBtn.classList.add(["plusbooster__btn"],["__addUpsell"]);

    cloneBtn.setAttribute("onclick", "removeThat(this)");

    response.parentNode.insertBefore(cloneBtn, response);
    response.classList.add("plusbooster__hidden");
    response.style.display = "none";
  });
});

---

使用

addEventListener

和

removeEventListener

提供对相同事件处理程序函数的引用

只有在添加事件侦听器时引用了用作处理程序的函数时，才能删除事件侦听器。如果使用了注释性函数，则侦听器将不可移动

在以下示例中，您可以看到附加和删除事件侦听器的适当方式：

//选择元素
让myElement=document.getElementById（'myElement'）；
//处理程序1
函数myHandler_1（e）{
警报（'处理程序1'）
}
//处理程序2
函数myHandler_2（e）{
警报（'处理程序2'）
}
//使用myHandler_1（）添加单击事件侦听器
myElement.addEventListener（'click'，myHandler_1）
//删除以前分配的事件处理程序
myElement.removeEventListener（'click'，myHandler_1）
//使用myHandler_2（）添加另一个单击事件侦听器
myElement.addEventListener（'click'，myHandler_2）
//测试：单击事件，您将看到第一个
//侦听器已被删除，取而代之的是
//第二个被触发

---

单击我

不要使用

setAttribute

安装事件侦听器，也不要将代码放入字符串文本中。

removeEventListener

只能与

addEventListener

结合使用。那么您建议使用什么来代替

setAttribute

？？我应该使用

addEventListener

安装事件监听器吗？是。或者是更简单的

.onclick

属性，您可以简单地覆盖该属性以删除侦听器。您好@colxi，感谢您对这个问题的回答。。。我正在为多个网站使用动态脚本，所以我不确定哪个功能将与该按钮绑定。。。但我想删除在该单击事件上运行/附加的所有函数。关于如何使其更具动态性，您有什么建议吗？请查看Element.prototype.getEventListeners库。它将返回一个包含元素的所有绑定事件的对象。你可以在这里找到它：