为什么表格行编辑按钮点击后submit监听器会被多次触发？

你遇到的多次触发问题核心是事件监听器重复绑定，具体逻辑如下：

• 页面里的提交按钮（id为submit）是全局唯一的DOM节点，你没有对它做事件监听器的解绑处理
• 每次点击任意行的「编辑」按钮触发editDetails函数时，都会执行一次addEventListener给提交按钮新增一个独立的submit处理函数，addEventListener本身是追加绑定逻辑，不会覆盖之前已经绑定的监听器
• 每个生成的submit函数还会通过闭包持有本次编辑对应的行对象editRow，当你第N次点击编辑按钮后，提交按钮上已经绑定了N个处理函数，点击提交时所有绑定的函数都会依次执行，就出现了多次调用的情况

另外你的代码还存在两个隐性问题：

• 编辑完成后通过innerHTML重写行内容时，会销毁原有编辑按钮上绑定的点击事件，后续再点该行的编辑按钮不会触发任何逻辑
• 编辑后的行ID会被替换为全局最新的id值，而不是该行原来的ID，会出现ID错乱

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