Javascript如何在click首次触发后移除事件监听器中的单个绑定函数

原有代码失效原因 #

removeEventListener 方法移除事件监听器的前提是：传入的函数引用必须与 addEventListener 绑定的函数引用完全一致。你原代码中绑定的是匿名箭头函数，尝试移除的renderList并不是实际绑定的监听器函数，因此无法生效。

可行实现方案 #

方案1：拆分独立监听器（推荐） #

将两个逻辑拆分为两个独立的监听器分别绑定，仅移除需要单次执行的监听器即可，不会影响永久保留的toggleView逻辑：

const button = document.getElementById("view_button");

// 永久保留的点击逻辑
button.addEventListener("click", toggleView);

// 仅执行一次的点击逻辑
const handleRenderOnce = () => {
  renderList();
  // 移除当前监听器，不影响其他绑定的点击事件
  button.removeEventListener("click", handleRenderOnce);
};
button.addEventListener("click", handleRenderOnce);

方案2：状态标记控制 #

如果不想拆分监听器，也可以通过闭包变量标记执行状态，控制renderList仅执行一次：

const button = document.getElementById("view_button");
let isFirstClick = true;

button.addEventListener("click", () => {
  toggleView();
  if (isFirstClick) {
    renderList();
    isFirstClick = false;
  }
});

两种方案都可以实现需求，方案1的优势是单次逻辑执行后会完全移除对应的监听器，没有额外的状态判断开销；方案2写法更简洁，逻辑更集中。

内容的提问来源于stack exchange，提问作者zewicz