JavaScript：如何移除按钮上的旧事件监听器？

你的核心问题是：每次添加的都是全新的匿名函数，移除时传入的也是新创建的匿名函数，这两个函数不是同一个引用，所以removeEventListener根本找不到要移除的旧监听器。

要解决这个问题，关键是保存每次添加的监听器函数的引用，移除时直接使用这个引用即可。下面给出两种可行的实现方式：

方式一：保存箭头函数引用 #

var prevTutor = null;
var prevInviteListener = null; // 存储上一次的监听器函数引用

const sendInvite = (name) => {
    // ... 你的业务逻辑
}

function some_function() {
    const name = { user_input }; // 建议用const/let避免全局变量污染

    // 移除旧的监听器（如果存在）
    if (prevInviteListener) {
        inviteBtn.removeEventListener('click', prevInviteListener);
    }

    // 创建绑定当前name的新监听器
    prevInviteListener = () => {
        sendInvite(name);
    };

    // 添加新监听器
    inviteBtn.addEventListener('click', prevInviteListener);
    prevTutor = name;
}

方式二：使用Function.prototype.bind绑定参数 #

bind方法会返回一个绑定了指定参数的新函数，我们只需要保存这个返回的函数引用即可：

var prevTutor = null;
var prevInviteListener = null;

const sendInvite = (name) => {
    // ... 你的业务逻辑
}

function some_function() {
    const name = { user_input };

    if (prevInviteListener) {
        inviteBtn.removeEventListener('click', prevInviteListener);
    }

    // 绑定当前name到sendInvite，生成新函数
    prevInviteListener = sendInvite.bind(null, name);
    inviteBtn.addEventListener('click', prevInviteListener);
    prevTutor = name;
}

注意事项 #

• 避免使用全局变量存储name，尽量用块级作用域的const/let，防止变量被意外覆盖；
• 确保inviteBtn是正确获取到的DOM元素，不存在作用域问题；
• 两种方式的核心都是复用同一个函数引用，这样removeEventListener才能精准匹配并移除旧的监听器。

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