EventListener添加与移除功能异常，请求排查代码问题

核心问题：事件移除无效 #

你这段代码里，removeEventListener无法成功移除按钮的点击事件，原因很明确：

• 绑定事件时用的是匿名函数，移除时又写了另一个全新的匿名函数。JavaScript里每个匿名函数都是独立的引用，两者完全不匹配，所以移除操作根本找不到要删除的事件。

次要问题：拼写失误 #

• 函数名clickButon拼写错误，正确应为clickButton；
• updateHTml里的H应该小写，正确是updateHtml，否则调用时会报错找不到该函数。

修复后的代码 #

把要绑定的事件逻辑抽成具名函数，让addEventListener和removeEventListener使用同一个函数引用：

// 抽成具名函数，统一用于绑定和移除
function handleBtnClick() {
    updateHtml(); // 修正拼写
    console.log('event click here ')
    // jsFileLoad();
}

function clickButton() { // 修正函数名拼写
    var btn = document.getElementById('updateText');
    btn.addEventListener('click', handleBtnClick, true);
}    

function eventRemove() {
    var btn = document.getElementById('updateText');
    btn.removeEventListener('click', handleBtnClick, true); // 使用同一个函数引用
}

window.onload = function() {
    clickButton();

    setTimeout(function() {
        eventRemove();
    }, 2000);
}

修改后，2秒后调用eventRemove就能成功移除按钮的点击事件，点击按钮不会再触发原有逻辑。同时修正的拼写错误也能避免后续函数调用时出现未定义的报错。

内容的提问来源于stack exchange，提问作者Rohit Azad Malik