事件监听器重复触发问题咨询

嘿，我完全懂你现在的困惑——明明只是给alert里多添了几个感叹号，结果点击按钮时弹窗次数居然跟着变多，换去W3Schools试却完全正常，这事儿确实挺让人摸不着头脑的！

咱们先拆解下问题的根源：你使用的那个教程在线编辑器，每次修改代码后会自动重新执行整个脚本，但不会清理之前已经绑定的事件监听器。

举个具体的场景：

• 第一次运行脚本，你给按钮绑定了1个click监听器，点击按钮会弹1次alert；
• 当你修改alert里的文字（比如加第一个"!"），编辑器重新跑脚本，又给同一个按钮绑定了1个新的监听器，现在按钮上总共有2个监听器了；
• 再改一次加第二个"!"，脚本又执行一遍，监听器变成3个——所以点击按钮时，这3个监听器会依次触发，就出现了弹3次alert的情况。

而W3Schools的编辑器逻辑不一样，它每次重新运行代码时，相当于重置了整个页面上下文，之前绑定的监听器都会被清空，所以每次都是全新的绑定，自然不会出现重复触发的问题。

给你几个解决这个问题的小办法：

• 办法一：绑定前先移除旧监听器
  这里要注意，匿名函数没法被移除，所以得把监听函数改成命名函数：

  function showAlert() {
    alert("Hey there!!!");
  }
  const button = document.querySelector(".event-button");
  // 先移除可能存在的旧监听器
  button.removeEventListener("click", showAlert);
  // 再绑定新的
  button.addEventListener("click", showAlert);
  

• 办法二：改用onclick属性绑定
  onclick是按钮的单个属性，每次赋值都会覆盖之前的绑定，不会叠加：

  const button = document.querySelector(".event-button");
  button.onclick = function() {
    alert("Hey there!!!");
  };
  

• 办法三：使用一次性监听器（仅适合单次触发场景）
  如果只是测试用，可以给addEventListener加第三个参数{ once: true }，让监听器只触发一次：

  const button = document.querySelector(".event-button");
  button.addEventListener("click", function () {
    alert("Hey there!!!");
  }, { once: true });
  

备注：内容来源于stack exchange，提问作者xan