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

Question

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

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

}

Answer 1

您可以告诉事件侦听器仅触发一次：

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

文档说：

Once：一个布尔值，表示监听器添加后最多调用一次。如果为 true，则调用时侦听器将自动删除。

Answer 2

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

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

addEventListener('click', handler, false);

PS.如果你关心速度,你可能希望考虑只使用一个事件处理程序.您可以将处理程序放入div的父元素中,然后从那里委派事件.使用24个处理程序,您当前的方法可能没有非常大的性能影响,但如果它感觉很慢,您应该记住这一点.