Question

删除eventListeners时遇到问题。有一个代码：

var check = document.getElementsByClassName("check");

function mouseoverse (counter) {
    return function mouseoverse () {
        check[counter].style.backgroundColor = "red";
    }
}

function mouseouts(counter) {

    return function () {
        check[counter].style.backgroundColor = "white";

}
} 

function clickn(counter) {

    return function () {
        check[counter].removeEventListener("mouseover", mouseoverse, false)
        check[counter].removeEventListener("mouseout", mouseouts, false)

    }
}


for (var counter1 = 0; counter1 < check.length; counter1++) {
    check[counter1].addEventListener("click", clickn(counter1));
    check[counter1].addEventListener("mouseover", mouseoverse(counter1));
    check[counter1].addEventListener("mouseout", mouseouts(counter1));
}

老实说，我不知道如何做这项工作。任何帮助和解释我做错了什么都会很好。感谢您的帮助：）

Answer 1

只有当您传入的函数完全与通过.removeEventListener()分配的函数对象相同时，addEventListener()方法才有效。在您的情况下，有两个问题：

您尝试通过引用构建您的事件侦听器而不是侦听器本身来执行删除。
您不会保存您构建的事件监听器功能，至少不会根据您发布的代码保存，因此您永远无法删除它们。

因此，您需要以某种方式保存为每个元素构造的事件侦听器函数，然后在要删除它们时使用这些保存的引用。

在我看来，对所有事件处理使用事件委托以及每个元素类或标志属性来跟踪事件处理程序是否应该执行任何操作会更简单和更清晰。在现代浏览器中处理事件不是一个严重的性能问题，因此让事件处理程序不做任何事情在绝大多数应用程序中都不会成为问题。

Answer 2

首先，通过调用mouseoverse绑定一个事件处理程序，它返回要绑定的函数，但是当你去删除时，你传递 mouseoverse而不是调用它

但即使您在删除时调用它，它仍然无法正常工作，因为您没有传递相同的功能。使用当前解决方案的唯一方法是使用一个函数数组来保存每个函数的索引，这样当需要删除时，counter可用于获取正确的函数。

无论哪种方式，您都不需要所有这些代码。按@Xufox编写，删除返回的函数并直接绑定/取消绑定mouseoverse函数。您可以使用this或event.currentTarget代替check[counter]来获取对元素的引用。

var check = document.getElementsByClassName("check");

function mouseoverse(event) {
  this.style.backgroundColor = "red";
}

function mouseouts(event) {
  this.style.backgroundColor = "white";
} 

function clickn(event) {
  this.removeEventListener("mouseover", mouseoverse)
  this.removeEventListener("mouseout", mouseouts)
}

for (var counter1 = 0; counter1 < check.length; counter1++) {
    check[counter1].addEventListener("click", clickn);
    check[counter1].addEventListener("mouseover", mouseoverse);
    check[counter1].addEventListener("mouseout", mouseouts);
}

删除事件监听器不起作用

2 个答案: