如何覆盖'；单击'；javaScript中的事件？

我想覆盖click事件的事件处理程序。这是我最初附加的事件处理程序

document.querySelector("[data-id='start-btn']")
            .addEventListener("click", function (evt) {
                //some code
            });

在某些条件之后，我想重写这个处理程序，并为“click”事件附加新的处理程序

 //removing
 document.querySelector("[data-id='start-btn']")
    .removeEventListener("click", function (evt) {
            //some code
        }, false);

  //attaching new
  document.querySelector("[data-id='start-btn']")
    .addEventListener("click", function (evt) {
            //code
        });

但它仍然在执行前面的事件处理程序。我使用了removeEventListener（但我猜，它不起作用）

---

告诉我哪里出了问题。

删除添加了

addEventListener

的处理程序的唯一方法是使用完全相同的参数使用

removeEventListener

。这意味着您需要对原始函数的引用：

var handler = function (evt) {
    //some code
};
document.querySelector("[data-id='start-btn']").addEventListener("click", handler);

function my_func() { /* code */ }

然后移除

document.querySelector("[data-id='start-btn']").removeEventListener("click", handler);

---

removeEventListener

只有在使用函数引用时才有意义，而不是将整个函数正文同时传递给它和

addEventListener

，这可能意味着大量重复代码（而且，正如您所发现的，无论如何都不起作用）

因此，准备一份对您的函数的引用：

var handler = function (evt) {
    //some code
};
document.querySelector("[data-id='start-btn']").addEventListener("click", handler);

function my_func() { /* code */ }

并将其作为处理程序参数传递给

add/removeEventListener

document.querySelector('query').addEventListener('click', my_func);
document.querySelector('query').removeEventListener('click', my_func);

有一种更简单的方法可以使用较旧的编码标准。如果特定类型和元素只需要一个事件处理程序，可以使用DOM zero

onclick

document.querySelector('query').onClick = my_func;
document.querySelector('query').onClick = my_func2; /* my_func() will no longer fire */

---

从其他一些答案中可以看出，删除事件侦听器可能是一场噩梦。谢天谢地，在某些情况下，有一种更简单的方法：添加另一个更早触发的事件侦听器，并取消其余的事件侦听器

在我的例子中，有一个

单击

事件处理程序我想要覆盖，我能够添加另一个带有

useCapture=true的事件处理程序来覆盖它


document.body.addEventListener（'click'，函数（e）{
if（e.target.innerHTML.toLowerCase（）=='regular'）{
e、 target.insertAdjacentHTML（“afterend”，“我们不想要的一个”）；
e、 预防默认值（）；
}
});
document.body.addEventListener（'click'，函数（e）{
如果（e.target.innerHTML.toLowerCase（）=='fixed'）{//或此处的任何事件或其他预/评估/条件
e、 target.insertAdjacentHTML（'afterend'，'we确实想要的一个'）；
e、 预防默认值（）；
e、 停止传播（）；
}
//document.querySelector（'.somethingelse'）。单击（）；//等等。
}，对）
我正在构建一个chrome扩展，由于某种原因，
removeEventListener
无法按预期工作。我想出的解决办法是使用这种方法。


文件上说

克隆节点会复制其所有属性及其值，
包括内部（内联）侦听器。它不复制事件
使用addEventListener（）添加的侦听器或分配给元素的侦听器
财产

我所做的是为我的实际元素创建一个克隆，并用克隆的元素替换它。这将从元素中删除所有事件侦听器。一个简单的例子如下

let newClonedElem = myActualElem.cloneNode(true);
myActualElem.parentNode.replaceChild(newClonedElem, myActualElem);

您正在将不同的函数传递给
addEventListener
和
removeEventListener
。那不行。