Question

有人可以帮助检查removeHandler无法正常工作的原因吗？以及如何使它工作？感谢。

  <body>
  <button onclick="removeHandler()" id="myBtn">remove</button>
  <p id="demo">hello</p>

<script>
document.getElementById("demo").addEventListener("click", myFunction("random: "));

function myFunction(t) {
    var x = function(){
        document.getElementById("demo").innerHTML = t+Math.random();
    };
    return x;
}

function removeHandler() {
    document.getElementById("demo").removeEventListener("click", myFunction("random: "));
}
</script>

</body>

Answer 1

Becasue myFunction为每个呼叫返回一个新功能。每次调用myFunction时，它都会创建（定义）一个新函数，并将其返回。

function myFunction() {
    return function() {};
}

var f1 = myFunction();
var f2 = myFunction();

console.log(f1 === f2);

<强> FIX：

您必须将myFunction的返回值存储到变量中，然后将该变量传递给addEventListener和removeEventListener：

var f = myFunction("random: ");
document.getElementById("demo").addEventListener("click", f, false);
// ...
document.getElementById("demo").removeEventListener("click", f);

Answer 2

在删除事件侦听器时，JavaScript非常特别。您只能删除之前添加的相同的事件侦听器。它还需要匹配它是否冒泡。

除此之外，这意味着您无法删除匿名事件侦听器，因为您无法识别它。

在您的情况下，您通过实际尝试删除新创建的事件侦听器来解决问题。

删除事件侦听器的唯一方法是确保它具有名称。在您的情况下，它将如下：

var random=myFunction("random: ");
document.getElementById("demo").addEventListener("click", random,false);

function myFunction(t) {
    var x = function(){
        document.getElementById("demo").innerHTML = t+Math.random();
    };
    return x;
}

function removeHandler() {
    document.getElementById("demo").removeEventListener("click", random,false);
}

注意：

有一个变量名称（在本例中为random）来标识事件监听器函数
我还添加了false作为第三个参数，以确保删除与添加匹配。

Answer 3

似乎每次单击demo函数调用都会返回新函数，以使其不按预期运行。

尝试运行Example

<body>


  <p  id="demo">Hello</p>
  <button onclick="removeHandler()" id="myBtn">Try it</button>

<p><strong>Note:</strong> The addEventListener() and removeEventListener() methods are not supported in Internet Explorer 8 and earlier versions.</p>


<script>
document.getElementById("demo").addEventListener("click", myFunction);

function myFunction() {

    document.getElementById("demo").innerHTML = Math.random();


}

function removeHandler() {
    document.getElementById("demo").removeEventListener("click", myFunction);
}
</script>

为什么removeEventListener不起作用

3 个答案: