如何修复聊天机器人点击事件重复绑定引发的EventEmitter内存泄漏？

问题原因 #

每次流程循环启动时，你都重复执行了绑定document点击事件的代码，导致document上叠加了多个相同的事件处理函数。第一次启动绑定1个监听器，流程结束重启后又绑定1个，累计2个，点击链接时就会触发2次消息发送，以此类推，最终引发Possible EventEmitter memory leak detected内存泄漏警告。

修复方法 #

1. 确保事件监听器仅绑定一次

将事件绑定逻辑放在初始化代码中，只执行一次；若必须在流程启动时绑定，可通过全局标记避免重复绑定：

let isQLinkListenerBound = false;

function setupQLinkListener() {
    if (!isQLinkListenerBound) {
        document.addEventListener("click", (event) => {
            // 改用classList判断，兼容元素有多个类名的情况
            if (event.target.classList.contains("q_link")) {
                webchat.sendMessage(event.target.innerText);
                event.target.setAttribute('disabled', '');
            }
        });
        isQLinkListenerBound = true;
    }
}

// 流程启动时调用此函数
setupQLinkListener();

2. 流程结束时移除监听器

将事件处理函数提取为独立变量，在流程结束的回调中移除监听器，避免叠加：

// 单独定义处理函数
function handleQLinkClick(event) {
    if (event.target.classList.contains("q_link")) {
        webchat.sendMessage(event.target.innerText);
        event.target.setAttribute('disabled', '');
    }
}

// 流程启动时绑定事件
function startProcess() {
    document.addEventListener("click", handleQLinkClick);
}

// 流程结束时移除事件
function endProcess() {
    document.removeEventListener("click", handleQLinkClick);
}

3. 优化事件委托范围（推荐）

如果所有q_link元素都属于同一个固定父容器，直接给父容器绑定事件，缩小监听范围，减少全局事件开销：

// 假设父容器的ID为chat-message-container
const parentContainer = document.getElementById('chat-message-container');

parentContainer.addEventListener("click", (event) => {
    if (event.target.classList.contains("q_link")) {
        webchat.sendMessage(event.target.innerText);
        event.target.setAttribute('disabled', '');
    }
});

此方法只需绑定一次，无需在流程循环中重复操作，同时避免了全局事件的潜在问题。

额外优化点 #

原代码中event.target.className === "q_link"的判断逻辑存在缺陷，若元素同时拥有多个类名（如class="q_link btn"），判断会失效。改用event.target.classList.contains("q_link")可准确匹配目标类名。

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