为什么removeEventListener不起作用

时间:2017-04-26 03:10:03

标签: javascript

有人可以帮助检查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>

3 个答案:

答案 0 :(得分:2)

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

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

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

console.log(f1 === f2);

<强> FIX:

您必须将myFunction的返回值存储到变量中,然后将该变量传递给addEventListenerremoveEventListener

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

答案 1 :(得分:0)

在删除事件侦听器时,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作为第三个参数,以确保删除与添加匹配。

答案 2 :(得分:0)

似乎每次单击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>