Javascript 每次提交时发生类似事件时都会追加旧事件

我试着用香草JS做一个待办事项清单。有一个添加按钮可以在列表中添加项目。当为特定项目选择“编辑”选项时，“添加”按钮更改为“编辑”，并且输入框接受编辑后的值

当我编辑第一项时，它工作正常。但是，当我编辑第二项时，第一项和第二项的值都会更改。编辑第三项时也是如此，第二项和第一项的值也会更改。我不知道为什么会这样

const todoForm=document.querySelector（'.todo form'）；
//选择输入框
const todoInput=document.querySelector（'.todo input'）；
//使用class=“todo项目”选择

const todoItemsList=document.querySelector（'.todo items'）；
const butt=document.querySelector（'.add按钮'）；
让todos=[]；
todoForm.addEventListener（'submit'，（e）=>{
如果（butt.innerHTML==“添加”）{
控制台日志（“添加”）；
e、 预防默认值（）；
AddTo（todoInput.value）；
console.log（todoInput.value）；}
});
功能添加到（项目）{
控制台日志（项目）；
如果（项目！=''）{
常数todo={
id:Date.now（），
名称：项目，
已完成：false
}
todo.push（todo）；
addToLocal（）；
todoInput.value=''；
}
}
函数renderTo（）{
todoItemsList.innerHTML=''；
todos.forEach（（项目）=>{
const checked=item.completed？'checked'：空；
const li=document.createElement（'li'）；
setAttribute（'class'，'item'）；
li.setAttribute（'data-key'，item.id）；
如果（item.completed==true）{
li.classList.add（'checked'）；
}
li.innerHTML=`${item.name}X E`；
todoItemsList.append（li）；
})
}
函数addToLocal（）{
setItem（'todos'，JSON.stringify（todos））；
renderTo（）；
}
函数getFromLocal（）{
const reference=localStorage.getItem（'todos'）；
如果（参考）{
todos=JSON.parse（参考）；
renderTo（）
}
}
getFromLocal（）；
todoItemsList.addEventListener（'单击'，（e）=>{
如果（e.target.type==='复选框'）{
切换（例如target.parentElement.getAttribute（'data-key'）；
}
if（例如target.classList.contains（'delete-button'））{
del（例如target.parentElement.getAttribute（'data-key'）；
}
if（例如target.classList.contains（'edit-button'））{
编辑（例如target.parentElement.getAttribute（'data-key'）；
}
})
功能切换（id）{
todos.forEach（（项目）=>{
如果（item.id==id）{
item.completed=！item.completed；
}
});
addToLocal（）；
}
函数del（id）{
todos=todos.filter（（项目）=>{
return item.id！=id；
});
addToLocal（）；
}
功能编辑（id）{
butt.innerHTML=“编辑”；
todos.forEach（（项目）=>{
如果（item.id==id）{
todoInput.value=item.name；
控制台日志（项目）；
todoForm.addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
控制台日志（项目）；
item.name=todoInput.value；
addToLocal（）；
})
}
})
}

*{
填充：0；
保证金：0；
}
身体{
宽度：100vw；
最小高度：100vh；
显示器：flex；
证明内容：中心；
背景：线性梯度（#F00000，#DC281E）；
字体系列：无衬线；
}
按钮：悬停{
光标：指针；
背景色：#73E831；
}
保险商实验室{
列表样式类型：无；
/*去掉列表项旁边的项目符号*/
}
/*通用样式结尾*/
/*容器*/
.集装箱{
最小宽度：700px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
填充：20px；
}
h1{
颜色：#fff；
字体大小：3rem；
}
/*待办事项表*/
.待办事项表格{
利润率：40px 0px；
}
.待办事项输入{
宽度：250px；
边界：无；
大纲：无；
边界半径：5px；
填充：10px；
右边距：10px；
字号：1rem；
}
.添加按钮{
背景色：#0000ff；
颜色：#fff；
边界：无；
大纲：无；
边界半径：5px；
填充：7px；
字号：1.2rem；
}
/*待办事项形式结束*/
/*待办事项*/
.待办事项{
最小宽度：350px；
}
/*带有class=“item”的每个li*/
.项目{
背景色：#fff；
填充：10px；
字号：1.1rem；
}
.项目：第一个孩子{
边框左上半径：7px；
边框右上角半径：7px；
}
.项目：最后一个孩子{
边框左下半径：7px；
边框右下半径：7px；
}
/*项目样式结束*/
.复选框{
右边距：10px；
}
.删除按钮{
浮动：对；
背景色：#dc143c；
边界：无；
大纲：无；
边界半径：7px；
填充物：2px 5px；
左边距：10px；
字号：1.1rem；
字号：550；
}
.编辑按钮{
浮动：对；
背景颜色：蓝色；
边界：无；
大纲：无；
边界半径：7px；
填充物：2px 5px；
左边距：3倍；
字号：1.1rem；
字号：550；
}
/*选中todo项目时应用*/
.checked{
文字装饰：线条贯通；
}

事項清單
待办事项
添加


去健身房
X

您正在为每个选择创建一个新的“提交”事件侦听器，并且从不清理它们

每个选择都会向现有的事件侦听器添加一个新的事件侦听器

请参见编辑方法中的更改，或参见

const todoForm=document.querySelector（'.todo form'）；
//选择输入框
const todoInput=document.querySelector（'.todo input'）；
//使用class=“todo项目”选择

const todoItemsList=document.querySelector（'.todo items'）；
const butt=文档。