javascript - 第二次调用 addEventListener 时，如何摆脱 addEventListener 中使用的旧值？

Question

这是我实际代码的简化版本。

有三个复选框和按钮(每个编号为 0、1、2)和一个提交按钮。简而言之，如果您选中复选框编号 1 和 2，单击提交，按钮 1 和 2 将被着色。现在您可以单击任何彩色按钮，它应该将 1,2 打印到控制台中。

如果您放置任何其他已选中复选框的组合，它应该以相同的方式工作。

// There are 3 buttons (outside submt button), each corresponds to each 3 checkboxes.
var checkboxes = document.querySelectorAll("input[type='checkbox']");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var buttons = [btn1, btn2, btn3];


document.getElementById("theButton").addEventListener("click", function() {

  // Info which checkbox are checked is in "checkedIdx"
  const checkedIdx = [];
  for (let i = 0; i < 3; i++) {
    if (checkboxes[i].checked == true) {
      checkedIdx.push(i);
    }
  }

  // Initialize button color.
  buttons.forEach(btn => {
    btn.style.backgroundColor = "white";
    btn.style.backgroundColor = "white";
  });

  // Set color=yellow to button that corresponds checked checkbox.
  for (let j = 0; j < checkedIdx.length; j++) {
    buttons[checkedIdx[j]].style.backgroundColor = "yellow";
    buttons[checkedIdx[j]].addEventListener("click", () => {

      // Print which checkbox checked
      console.log(checkedIdx + " ");
    });
  }

});

<input type="checkbox" id="cb0" />
<label for="cb0"> 0 </label><br>
<input type="checkbox" id="cb1" />
<label for="cb1"> 1 </label><br>
<input type="checkbox" id="cb2" />
<label for="cb2"> 2 </label><br>

<input type="button" id="theButton" value="Submit"><br>

<input type="button" id="btn1" value="0"><br>
<input type="button" id="btn2" value="1"><br>
<input type="button" id="btn3" value="2"><br>

代码按预期视觉运行，但让我感到困扰的是单击按钮时还会打印上一个提交 session 的索引。因此，如果您选中复选框编号 1 和 2，单击提交，单击按钮，它将打印 1,2。现在你再做一次，但取消选中复选框 1，它会打印:

1,2
2

似乎 addEventListener 在第二次提交时第二次附加到按钮。现在我想像这样使用循环是实现我预期场景的错误方法，但我想不出更好的方法。

有什么建议吗？

Answer 1

您的问题是，每次单击“提交”时，您都会向同一个按钮添加其他事件监听器，导致您在激活新事件监听器和旧事件监听器时看到以前的值。一种选择是删除事件监听器，但这会变得很麻烦，因为您需要保留对传递给 addEventListener() 的函数的引用。相反，我建议您向所有带编号的按钮添加一个事件监听器，但仅在它通过条件时才运行其中的代码 - 也就是说，已单击的按钮具有一个 value checkedIdx:

// There are 3 buttons (outside submt button), each corresponds to each 3 checkboxes.
var checkboxes = document.querySelectorAll("input[type='checkbox']");
var buttons = document.querySelectorAll(".btn");

// Make your array global so you can access it within other functions
const checkedIdx = [];
document.getElementById("theButton").addEventListener("click", function() {
  checkedIdx.length = 0; // clear the array each click
  for (let i = 0; i < 3; i++) {
    if (checkboxes[i].checked == true) {
      checkedIdx.push(i);
    }
  }
  // Initialize button color.
  buttons.forEach(btn => {
    btn.style.backgroundColor = "white";
  });

  // Set color=yellow to button that corresponds checked checkbox.
  for (let j = 0; j < checkedIdx.length; j++) {
    buttons[checkedIdx[j]].style.backgroundColor = "yellow";
  }
});

// Add an event listener to all buttons to start with
// Control which ones activate based on whether their `value` can be found
// within your checkedIdx array. 
buttons.forEach(btn => {
  const value = Number(btn.value);
  btn.addEventListener("click", () => {
    if(checkedIdx.includes(value)) {
      console.log(checkedIdx +""); // code here that you want to perform. This could invoke another function etc...
    }  
  });

});

<input type="checkbox" id="cb0" />
<label for="cb0"> 0 </label><br>
<input type="checkbox" id="cb1" />
<label for="cb1"> 1 </label><br>
<input type="checkbox" id="cb2" />
<label for="cb2"> 2 </label><br>

<input type="button" id="theButton" value="Submit"><br>

<input class="btn" type="button" id="btn1" value="0"><br>
<input class="btn" type="button" id="btn2" value="1"><br>
<input class="btn" type="button" id="btn3" value="2"><br>