如何正确移除EventListener？附失效示例求修正方案

你的代码无法正常移除事件监听的核心问题是：添加监听时使用的是匿名箭头函数，而移除时传入的是test_function——这两个不是同一个函数引用，removeEventListener要求必须传入和添加阶段完全一致的函数对象才能生效。

修正方案一：保存箭头函数引用 #

把用于包装的箭头函数赋值给变量，用同一个变量完成添加和移除操作：

function test_function(a='', b='') {    
    console.log('test_function started. a='+a+', b='+b);    
}

// 将箭头函数存入变量
const mouseMoveHandler = () => { test_function('testa', 'testb'); };
document.body.addEventListener('mousemove', mouseMoveHandler);
// 使用同一个变量移除监听
document.body.removeEventListener('mousemove', mouseMoveHandler);

修正方案二：用bind绑定参数（无需额外包装函数） #

如果不需要箭头函数包装，可通过bind给test_function绑定固定参数，同时保存绑定后的函数引用：

function test_function(a='', b='') {    
    console.log('test_function started. a='+a+', b='+b);    
}

// 绑定参数并保存函数引用
const boundHandler = test_function.bind(null, 'testa', 'testb');
document.body.addEventListener('mousemove', boundHandler);
document.body.removeEventListener('mousemove', boundHandler);

关键注意点 #

• 匿名函数（包括直接内联的箭头函数）无法被移除，因为没有办法再次获取到它的引用。
• removeEventListener的第二个参数必须和addEventListener中传入的是同一个函数对象，不能是同名但不同引用的函数。

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