不使用箭头函数，能否给事件监听器回调传参并可移除？

你的需求完全可行，核心是要给带参数的回调创建一个可被引用的“包装函数”，下面是两种满足要求的实现方式：

方法1：使用bind()绑定参数并保存引用 #

Function.prototype.bind()会返回一个新的函数，这个函数预先绑定了你需要传递的参数，同时可以保存这个新函数的引用，后续用它来移除监听器：

// 原回调函数
function printText(str){
    console.log(str)
}

// 创建绑定了参数的函数并保存引用
const boundPrint = printText.bind(null, '需要传递的文本');

// 添加事件监听器
item.addEventListener('click', boundPrint);

// 后续移除监听器（使用同一个引用）
item.removeEventListener('click', boundPrint);

方法2：用工厂函数生成带参数的回调 #

自己封装一个工厂函数，生成包含指定参数的回调函数，同样保存这个生成的函数引用：

function printText(str){
    console.log(str)
}

// 工厂函数：生成带指定参数的回调
function createPrintCallback(targetStr) {
  return function() {
    printText(targetStr);
  };
}

// 生成带参数的回调并保存引用
const customPrint = createPrintCallback('需要传递的文本');

item.addEventListener('click', customPrint);
item.removeEventListener('click', customPrint);

为什么你之前的尝试没成功？ #

• 尝试2：printText('text')是直接执行函数，把函数的返回值（这里是undefined）传给了addEventListener，所以页面加载时就会执行，而不是点击时触发。
• 尝试3：箭头函数是匿名函数，没有可复用的引用，所以后续无法通过removeEventListener找到它来移除。

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