如何移除已绑定的前置eventListener？附相关JavaScript代码场景

Hey，我来帮你搞定移除事件监听的问题～首先得点明你当前代码里的核心坑——你用了匿名函数绑定事件，而removeEventListener必须拿到和绑定时候完全相同的函数引用才能生效，匿名函数根本做不到这一点。

核心原理 #

removeEventListener的三个参数（事件类型、处理函数、捕获/冒泡选项）必须和addEventListener调用时完全一致，尤其是处理函数必须是同一个引用。匿名函数每次创建都是新的引用，所以没法被移除。

针对你的代码场景的修改方案 #

你的原代码还有个额外问题：每次触发keyup都会给submit按钮绑定一次click事件，导致点击submit时会重复执行create。下面是修正后的代码，同时解决移除监听和重复绑定的问题：

// 先把事件处理函数定义成具名函数，保留引用
function handleKeyUp(event) {
  const inputEl = document.querySelector(".textt");
  const inputValue = inputEl.value;
  console.log(event);

  const submitBtn = document.getElementById("submit");
  
  // 先移除之前的click监听（防止重复绑定）
  submitBtn.removeEventListener("click", handleSubmitClick);
  // 绑定新的click监听，这里用闭包把当前的event传递进去
  submitBtn.addEventListener("click", handleSubmitClick);

  // 定义submit的点击处理函数
  function handleSubmitClick() {
    create(event);
    inputEl.value = "";
    // 点击完成后，移除这个click监听（可选，根据需求）
    submitBtn.removeEventListener("click", handleSubmitClick);
  }
}

function create(event) {
  const outputList = document.querySelector(".output");
  const newItem = document.createElement('li');
  newItem.textContent = `The key Code for ${event.key} is: ${event.keyCode}`;
  outputList.appendChild(newItem);
}

// 绑定keyup事件到输入框
const inputElement = document.querySelector(".textt");
inputElement.addEventListener("keyup", handleKeyUp);

// 如果你需要移除keyup监听的话，直接调用下面这行即可：
// inputElement.removeEventListener("keyup", handleKeyUp);

关键注意点 #

• 必须使用具名函数或保存函数引用：不管是把函数写成具名形式，还是把匿名函数赋值给变量（比如const handler = function() {}），都要保证绑定和移除时用的是同一个引用。
• 避免重复绑定：像你原代码里在keyup里嵌套绑定click的写法，会导致每次按键都新增一个监听，一定要先移除再绑定，或者把外层的监听移到更合适的时机（比如页面加载完成时）。
• 匹配所有参数：如果绑定事件时指定了第三个参数（比如addEventListener("keyup", handler, true)），移除时也必须传入同样的第三个参数才能生效。

另一种简洁写法（用变量保存匿名函数） #

如果不想写具名函数，也可以把匿名函数赋值给变量，这样也能拿到引用：

const keyUpHandler = function(event) {
  // 你的keyup处理逻辑
};

inputElement.addEventListener("keyup", keyUpHandler);
// 移除监听
inputElement.removeEventListener("keyup", keyUpHandler);

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