提问人：Gabriel Vallejo 提问时间：11/14/2022 最后编辑：Felix KlingGabriel Vallejo 更新时间：11/14/2022 访问量：29
事件侦听器在激活时累积并运行多次 （JavaScript）
Eventlistener accumulating and functioning more than once when activated (JavaScript)
问：
我正在尝试创建一个待办事项列表，目前我只想要一个按钮来添加和删除任务。
添加按钮添加一个新任务和一个附加到该任务的按钮。
目前，附加的按钮仅打印“hello”，但是我注意到当有多个任务时，正在打印多个hello。
我想这是因为 eventListeners 正在累积到最旧的任务。发生这种情况的原因是为添加此 eventListeners 而创建的 for 循环。
我认为添加eventListeners的简单解决方案是将for循环放在add（）函数之外，但我无法使其正常工作。
如何阻止eventListeners累积？
const addBtn = document.getElementById("add-btn")
const divWrp = document.getElementById("wrapper")
let tasks = document.querySelectorAll('.task')
let closeBtns = document.querySelectorAll('.close-btn')
let a = 1;
let b = 0;
addBtn.addEventListener("click", function(){
let newTask = document.createElement("div")
newTask.classList.add("task")
newTask.textContent = "Task" + a
let closeBtn = document.createElement("button")
closeBtn.classList.add("close-btn")
newTask.append(closeBtn)
divWrp.append(newTask)
console.log(newTask)
a += 1;
closeBtns = document.querySelectorAll('.close-btn')
console.log(tasks.length)
for (let i = 0; i < closeBtns.length; i++){
closeBtns[i].addEventListener("click", function(){
b += 1
console.log("hello world" + b)
})
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="add-btn">ADD</button>
<div id="wrapper"></div>
<script src="index.js"></script>
<script src="jquery-3.6.1.min.js"></script>
</body>
</html>答：
1赞
Felix Kling
11/14/2022
#1
您可以直接将事件处理程序附加到刚刚创建的元素。将循环替换为
closeBtn.addEventListener("click", function(){
console.log("hello world")
// I guess you want something like this here:
// newTask.remove()
})
评论
0赞
Gabriel Vallejo
11/14/2022
非常感谢，我不知道remove（）的东西存在。它将非常有用，谢谢！
评论