Javascript 当我点击一个元素时，返回多次

这是我的代码（没有css文件）：

var taskInput=document.getElementById（“taskInput”），
taskList=document.getElementById（“任务列表”）；
taskList.addEventListener（“单击”，更改SLI）；
函数addTask（）{
如果（！taskInput.value）返回警报（“请输入任务”）；
var li=createLi（taskInput.value）；
任务列表。预结束（li）；
taskInput.value=“”；
}
函数createLi（标题）{
var li=document.createElement（“li”），
span=document.createElement（“span”），
div=document.createElement（“div”），
remove=document.createElement（“a”），
完成=document.createElement（“a”），
doneImg=document.createElement（“img”），
removeImg=document.createElement（“img”）；
span.textContent=标题；
li.className=“任务”；
div.className=“links”；
done.href=“#”；
done.className=“done”；
doneImg.alt=“完成”；
完成。追加儿童（doneImg）；
remove.href=“#”；
remove.className=“remove”；
removeImg.alt=“删除”；
remove.appendChild（removeImg）；
李.儿童（span）；
李.儿童组(分区);；
附属儿童分部（完成）；
子类（移除）；
返回李；
}
功能更改I（e）{
if（e.target.parentElement.classList.contains（“删除”））{
e、 target.parentElement.parentElement.parentElement.remove（）；
}
if（e.target.parentElement.classList.contains（“完成”））{
const tasks=document.queryselectoral（“.done”）；
tasks.forEach（task=>{
task.addEventListener（“单击”，函数（）{
console.log（如target）；
});
});
}
}

每次单击“.done”元素时，都会将新的单击事件绑定到每个“.done”元素：

if（e.target.parentElement.classList.contains（“done”））{
const tasks=document.queryselectoral（“.done”）；
//每一个“完成”
tasks.forEach（task=>{
//为click事件添加另一个回调
task.addEventListener（“单击”，函数（）{
console.log（如target）；
});
});
}

每当用户单击一个

done

按钮时，您都在向所有

done

按钮添加一个单击侦听器。添加侦听器不会替换以前的侦听器，因此每次单击它时都会添加另一个侦听器。当他们再次单击时，它会运行执行

console.log（e.target）

的所有侦听器，以及向所有按钮添加另一个侦听器的原始侦听器

您应该只在原始侦听器中记录所需内容，而不添加任何其他侦听器

var taskInput=document.getElementById（“taskInput”），
taskList=document.getElementById（“任务列表”）；
taskList.addEventListener（“单击”，更改SLI）；
功能更改I（e）{
if（e.target.parentElement.classList.contains（“删除”））{
e、 target.parentElement.parentElement.parentElement.remove（）；
}else if（e.target.parentElement.classList.contains（“done”））{
log（例如target.parentElement.parentElement.parentElement.querySelector（“span”）.textContent）；
}
}
函数addTask（）{
如果（！taskInput.value）返回警报（“请输入任务”）；
var li=createLi（taskInput.value）；
任务列表。预结束（li）；
taskInput.value=“”；
}
函数createLi（标题）{
var li=document.createElement（“li”），
span=document.createElement（“span”），
div=document.createElement（“div”），
remove=document.createElement（“a”），
完成=document.createElement（“a”），
doneImg=document.createElement（“img”），
removeImg=document.createElement（“img”）；
span.textContent=标题；
li.className=“任务”；
div.className=“links”；
done.href=“#”；
done.className=“done”；
doneImg.alt=“完成”；
完成。追加儿童（doneImg）；
remove.href=“#”；
remove.className=“remove”；
removeImg.alt=“删除”；
remove.appendChild（removeImg）；
李.儿童（span）；
李.儿童组(分区);；
附属儿童分部（完成）；
子类（移除）；
返回李；
}

当用户单击其中一个按钮时，为什么要将事件侦听器添加到所有的

.done

按钮？您正在添加越来越多的事件侦听器，当用户单击时它们都会运行。@barmar这是我的问题！解决办法是什么？我不敢相信解决办法这么简单！谢谢你的伟大的解决方案，我试图得到每个元素，我用另一个新的图像替换元素的图像！其实我的问题还没有解决

e.target

将是他们单击的图像，您可以执行

e.target.src=“newimg.png”

替换它。