如何避免表单submit事件监听器叠加触发历史处理逻辑？

• 每次调用saveChanges()函数时，都会给同一个changeForm元素追加新的submit事件监听器，这些监听器会一直附着在DOM元素上，没有做移除处理。每点击一次Change按钮，就会多挂载一个带独立闭包存储pagetype值的监听器，最终触发表单提交时，所有历史监听器会同步执行，发送多份不同pagetype关联的请求数据。
• 循环生成按钮时所有按钮共用同一个固定idchange，根据DOM规范同id元素全局唯一，document.getElementById('change')永远只会拿到页面中第一个生成的同id按钮，后续生成的按钮根本没有正常绑定事件，属于隐藏bug。

1. 修正按钮生成逻辑，避免重复id冲突
   生成按钮时不要给所有元素绑定相同的固定id，插入DOM后直接通过节点引用绑定事件，不要依赖全局id查找元素。
2. 调整表单事件绑定逻辑，避免监听器累加
   将表单的submit监听器从saveChanges函数内部移出，仅在页面初始化时绑定一次；通过可变的全局变量（或表单的自定义data属性）存储当前选中的pagetype值，每次点击Change按钮时更新这个值，表单提交时直接读取最新值即可。
3. 兜底适配（可选）
   如果业务逻辑必须在saveChanges内操作表单事件，每次绑定新监听器前，先移除元素上之前绑定的同类型监听器，避免事件累加。

// 定义全局可变变量，存储当前选中的pagetype，替代原闭包存储方案
let currentPageType = '';
// 表单元素、表单容器全局引用
const changeForm = document.getElementById('changeForm');
const formDiv = document.getElementById('divForm');

// 表单submit监听器仅绑定一次，放在初始化阶段执行
changeForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const changeFormObj = new FormData(changeForm);
    // 直接读取当前最新的pagetype值
    changeFormObj.append('pageType', currentPageType);
    saveChangesAsy(changeFormObj);
});

// 循环生成Change按钮
for(let i=0; i < Object.keys(json).length; i++) {
    const pagetype = json[i]['pagetype'];
    const d1 = document.getElementById('dispDiv');
    // 按钮使用class标识，避免重复id冲突
    d1.insertAdjacentHTML('afterend','<div><p><button class="change-btn">Change</button>');
    // 直接通过DOM节点引用拿到刚插入的按钮，避免全局id查找的偏差
    const changeBtn = d1.nextElementSibling.querySelector('.change-btn');
    changeBtn.addEventListener("click", function(event){
        event.preventDefault();
        // 点击时更新全局存储的pagetype值，显示表单容器
        currentPageType = pagetype;
        formDiv.style.display = 'block';
    });
}

async function saveChangesAsy(formObj) {
    // 原有数据库交互逻辑保持不变
}

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