在JavaScript的事件处理机制中，移除事件监听器的操作需要满足特定的条件，其中函数引用的匹配是最核心的要求。很多开发者在尝试移除函数内部定义的监听函数时，往往会遇到移除失败的情况，这和函数的作用域、引用特性有直接关系。
事件监听器移除的基本要求
使用removeEventListener移除事件监听器时，必须保证传入的移除函数和添加时使用的函数是同一个引用。也就是说，两个函数在内存中是同一个对象，而不是内容相同但引用不同的两个独立函数。如果添加和移除时使用的是不同的函数引用，移除操作就不会生效。
函数内部定义的函数为何难以移除
在函数内部定义的函数，每次外层函数执行时，都会创建一个新的函数实例，这就导致添加监听器和尝试移除时的函数引用大概率不一致。我们可以通过下面的示例来验证这个情况。
// 定义一个外层函数，内部创建监听函数并添加事件监听
function addInnerListener() {
// 内部定义的函数，每次addInnerListener执行都会创建新的函数实例
function handleClick() {
console.log('内部函数被触发');
}
// 给按钮添加点击事件监听
document.getElementById('btn').addEventListener('click', handleClick);
// 尝试立即移除刚添加的监听函数
document.getElementById('btn').removeEventListener('click', handleClick);
}
// 执行外层函数
addInnerListener();
上面的代码中，虽然添加和移除使用的是同一个handleClick变量，但是这个变量是在addInnerListener函数作用域内部的，当addInnerListener执行完成后，内部的handleClick如果没有被外部引用保存，就会被回收。如果我们在其他时机尝试移除这个内部函数，根本无法获取到当时的函数引用，自然也就无法完成移除。
可行的解决方案
要让移除函数内部的函数可行，核心是要保存内部函数的引用，让添加和移除时能够拿到同一个函数对象。常见的实现方式有两种。
方案一：将内部函数保存到外部可访问的作用域
可以把内部函数的引用赋值给一个外层作用域的变量，这样添加和移除时都可以使用这个变量拿到同一个函数引用。
// 外层作用域定义变量保存函数引用
let savedInnerFunc = null;
function addListenerWithSave() {
// 定义内部函数
function handleClick() {
console.log('保存引用的内部函数触发');
}
// 将内部函数引用保存到外层变量
savedInnerFunc = handleClick;
// 添加事件监听
document.getElementById('btn').addEventListener('click', savedInnerFunc);
}
function removeSavedListener() {
// 移除事件监听，使用保存的同一个引用
if (savedInnerFunc) {
document.getElementById('btn').removeEventListener('click', savedInnerFunc);
savedInnerFunc = null; // 移除后清空引用，避免内存泄漏
}
}
// 添加监听
addListenerWithSave();
// 后续需要移除时调用移除函数
// removeSavedListener();
方案二：使用闭包返回移除函数
通过闭包的特性，让内部函数的引用被返回的函数持有，保证添加和移除时的引用一致。
function createListenerManager() {
// 内部定义监听函数
function handleClick() {
console.log('闭包内的内部函数触发');
}
// 返回添加和移除的方法，两个方法都持有同一个handleClick引用
return {
add: function() {
document.getElementById('btn').addEventListener('click', handleClick);
},
remove: function() {
document.getElementById('btn').removeEventListener('click', handleClick);
}
};
}
// 创建管理器实例
const listenerManager = createListenerManager();
// 添加监听
listenerManager.add();
// 需要移除时调用移除方法
// listenerManager.remove();
注意事项
在实际开发中，还要注意如果内部函数使用了箭头函数，同样遵循引用一致的规则，不会因为箭头函数的特性而改变移除的要求。另外，如果事件监听器添加时使用了匿名函数，那么无论如何都无法移除，因为匿名函数没有可以被引用的标识符，这和内部定义的函数本质是不同的问题，但结果都是无法移除。
总结来说，函数内部定义的函数本身是可以被移除的，只要能够保证添加和移除时使用的是同一个函数引用，通过保存引用或者使用闭包的方式都可以实现这个目标，核心还是要理解JavaScript中函数引用和removeEventListener的工作机制。
事件监听器removeEventListener函数作用域闭包JavaScript修改时间：2026-07-10 14:00:25