多次运行的Javascript条件单击事件

我有一个HTML选择，旨在影响我的Javascript点击事件。虽然我的代码在技术上可行，但我不确定为什么我的单击事件会在我更改选择框值的相应时间运行

假设我将选项更改为“选择任何不是-”的选项。如果我单击标有“捐赠”的文本，那么在我的控制台日志上会出现一条文本Michael。现在，如果我将选项值切换到另一个不正确的值 t-，然后再次单击“捐赠”，然后我的控制台运行我的单击事件2次。如果我再次重复这个过程，我的点击事件会运行3次

我的例子似乎有点荒谬，但希望重点是明确的

var changing=document.getElementByIdchanging； var denate=document.getelementsbyclassnamedate； changing.addEventListener'change'，函数{ 如果此值为.value！==-{ 对于i=0；i<0.length；i++{ 捐赠[i]。添加EventListener'click'，函数{ console.logMichael； }; } } }; - 素食主义者 技术的 鞋

捐赠

捐赠

donate

如果选择值为==，则每次调用addEventListener时，都会绑定一个新的click侦听器

如果希望在select值为==时仅打印一次Michael，则绑定所有单击侦听器一次，并检查其中的值

for (let i = 0; i < donate.length; i++) {
  donate[i].addEventListener("click", function() {
    if (changing.value !== "--") {
      console.log("Michael");
    }
  });
}

---

这是否更接近你想要实现的目标

var changing = document.getElementById("changing");
var donate = document.getElementsByClassName("donate");
var flag = false;

function log() {
    console.log("Michael");
}

changing.addEventListener('change', function() {
  if (this.value !== "--" && !flag) {
    flag = true;
    for (i = 0; i < donate.length; i++) {
      donate[i].addEventListener('click', log );
    }
  }
  else if(this.value == "--") { 
    flag = false;
    console.log("+++")
    for (i = 0; i < donate.length; i++) {
      donate[i].removeEventListener('click', log );
    }
  }
});

---

注意，事件侦听器只需附加一次。因此，考虑代码实际上是要完成什么。

永远不要在其他事件侦听器中设置事件侦听器。

<select id="changing">
    <option value="--">--</option>
    <option value="vegetarian">Vegetarian</option>
    <option value="technical">Technical</option>
    <option value="shoes">Shoes</option>
</select>
<p class="donate">Donate</p>
<p class="donate">Donate</p>
<p class="donate">Donate</p>