JavaScript中如何在事件发生后移除EventListener？

Question

有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);

}

- einstein

Answer 1

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

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

文档中写道：

once： 一个布尔值，指示侦听器在添加后最多只应被调用一次。如果为true，则在调用后自动删除该侦听器。

- Theodor Peifer

---

截至2021年，_这个_是正确答案。 - noblerare

谢谢，@Theodor Peifer，你让我的一天变得美好！ - florian

有没有办法在触发之前，当满足条件时移除监听器？（例如 addEventListener('action', function () { if (sth) {code; removeListener});） - undefined

Answer 2

使用命名函数应该可以正常工作。如果你的第二种方法不能正常工作，请尝试将初始监听器存储到一个变量中，像这样：

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

addEventListener('click', handler, false);

提示：如果您关心速度，可以考虑仅使用一个事件处理程序。您可以将处理程序放入

元素的父元素中，然后从那里委派事件。使用24个处理程序，您当前的方法可能不会有很大的性能影响，但是如果它感觉很慢，这是您应该记住的事情。

- Jani Hartikainen

---

嗨，Jani！它起作用了！我非常感谢你！我整天都在尝试弄清楚，但没有成功。 - einstein

老话题了，但出于某种原因这对我不起作用。一个替代方案（停止事件监听器）是将事件监听器设置为空函数。 - MikeM

嗨Jani，你是如何在定义处理程序时在removeEventListener中调用处理程序的？这对我来说似乎是循环的，但显然我误解了什么！ - codingbryan

第三个参数（useCapture）是可选的，默认为false，因此不需要指定。 - holem

Answer 3

对于那些需要在特定条件下（甚至在循环内部）进行移除的人来说，一种选择是使用AbortController和AbortSignal：

const abortController = new AbortController();

let handler = function(event) {
    if(...) {
        abortController.abort();
    }
};

addEventListener('click', handler, {signal: abortController.signal});

- celsowm

Answer 4

同样的答案：

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

您可以在此处阅读更多信息：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

- Nguyễn Lê Anh Minh

---

不要重复别人的答案。 - Lang Minh Nguyên