为啥 removeEventListener 不起作用
Posted
技术标签:
【中文标题】为啥 removeEventListener 不起作用【英文标题】：why removeEventListener is not working为什么 removeEventListener 不起作用 【发布时间】：2022-01-21 16:57:18 【问题描述】：有人可以帮忙检查一下为什么 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>
【问题讨论】：
***.com/questions/10444077/… 或 ***.com/questions/16651790/… 或 ***.com/questions/5825493/… 【参考方案1】：因为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必须返回相同的函数。【参考方案2】：
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 作为第三个参数，以确保删除与添加匹配。
【讨论】：
再清楚不过了：“删除事件侦听器的唯一方法是确保它具有名称。”感谢那。对此还有其他答案，但这句话对我来说真的是一针见血。【参考方案3】：似乎每次单击演示函数调用都会返回新函数，因此它的行为不符合预期。
尝试运行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 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
vue 创建监听,和销毁监听(addEventListener, removeEventListener)
Javascript里removeEventListener的必要
addEventListener()和removeEventListener()