仅在单击特定的div时执行一次事件监听器，但在其他div上继续执行它

Question

我有一个循环，该循环遍历24个具有相同类的div（框），并且内部有一个事件侦听器。每当有人单击div（框）时，它都会更改背景色。问题是我一直在跟踪打开了多少个“盒子”，但是即使打开了我的当前代码，即使有人打开了盒子，每次有人单击盒子时，openedBox变量也会不断增加。

for(var i = 0; i < boxes.length; i++){
  boxes[i].addEventListener("click", function(){
    this.style.backgroundColor = "#09093F";
    openedBoxes++;
});

我想知道的是是否有可能阻止事件侦听器在每个div上执行多次。还是找到另一种方式来跟踪已打开的盒子（例如，计算有＃09093F背景的盒子数量）是否更容易。

PS。我尝试在事件侦听器中添加this.removeEventListener("click", function(){});，但显然它不起作用，哈哈。

Answer 1

您可以在once第三个参数中使用addEventListener选项。

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

once

Answer 2

您可以删除事件监听器：

element.addEventListener('click', function(event) {
  // ...
}, {once: true});