事件发生后在 JavaScript 中删除 EventListener？答案

【问题标题】：Remove EventListener in JavaScript after event occurred?事件发生后在 JavaScript 中删除 EventListener？
【发布时间】：2010-09-16 05:21:18
【问题描述】：

有 24 个 div 对象在等待/侦听鼠标单击。单击一个 div 对象后，我想从所有 24 个 div 对象中删除 EventListener。

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener()//Problem lies here
        }

        //Some other code to be run after mouseclick

        },false);

}

问题是removeEventListener 嵌套在addEventListener 中，我需要将类型、侦听器、标题定义为removeEventListener 方法的属性。而且我认为由于嵌套，无法定义监听器。

我也尝试定义函数名，但没有成功：

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function helpme(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener('click',helpme,false);
        }

        //Some other code to be run after mouseclick

        },false);

}

【问题讨论】：

标签： javascript dom-events

【解决方案1】：

它应该与命名函数一起使用。如果您的第二种方法无法正常工作，请尝试将初始侦听器存储到变量中，如下所示：

var handler = function(event) {
    for(...) {
        removeEventListener('click', handler, false);
    }
};

addEventListener('click', handler, false);

附言。如果您关心速度，您可能希望考虑只使用一个事件处理程序。您可以将处理程序放入 div 的父元素中，然后从那里委托事件。使用 24 个处理程序时，您当前的方法可能不会对性能造成很大影响，但如果感觉速度很慢，您应该记住这一点。

【讨论】：

嗨，贾尼！有效！我非常感谢你！我试图弄清楚一整天都没有成功
老话题，但由于某种原因，这对我不起作用。对我有用的另一种方法（停止事件侦听器）是将事件侦听器设置为空函数。
您好 Jani，在定义处理程序时如何在 removeEventListener 中调用处理程序？这对我来说似乎是循环的，但我显然误解了一些东西！

【解决方案2】：

你可以告诉事件监听器只触发一次：

document.addEventListener("click", (e) => {
            // function which to run on event
}, { once: true });

文档说：

once:
A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.

【讨论】：

截至 2021 年，this 是正确答案。

【解决方案3】：

同样的答案：

element.addEventListener("click", (e) => {
  // function which to run on event 
}, { once: true });

您可以在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

【讨论】：

不要重复别人的答案