为什么 removeEventListener 不起作用答案

【问题标题】：why removeEventListener is not working为什么 removeEventListener 不起作用
【发布时间】：2017-09-23 06:34:10
【问题描述】：

有人可以帮忙检查一下为什么 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>

【问题讨论】：

stackoverflow.com/questions/10444077/… 或 stackoverflow.com/questions/16651790/… 或 stackoverflow.com/questions/5825493/…

标签： javascript

【解决方案1】：

似乎每次单击演示函数调用都会返回新函数，因此它的行为不符合预期。

尝试运行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>

【讨论】：

【解决方案2】：

因为myFunction 每次调用都会返回一个新函数。每次调用myFunction，它都会创建（定义）一个新函数并返回它。

function myFunction() {
    return function() {};
}

var f1 = myFunction();
var f2 = myFunction();

console.log(f1 === f2);

修复：

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

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

【讨论】：

谢谢。那么有没有办法去掉这种方式添加的handler函数呢？
@QiaoLi 那么myFunction必须返回相同的函数。

【解决方案3】：

JavaScript 在移除事件监听器方面非常特别。您只能移除之前添加的 same 事件监听器。还需要匹配是否冒泡。

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

在您的情况下，您实际上是在尝试删除新创建的事件侦听器，从而使问题更加复杂。

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

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 作为第三个参数，以确保删除与添加匹配。

【讨论】：

再清楚不过了：“删除事件侦听器的唯一方法是确保它具有名称。”感谢那。对此还有其他答案，但这句话对我来说真的是一针见血。