javascript - 当我点击一个元素时返回多次

Question

这是我的代码(没有 css 文件):

var taskInput = document.getElementById("taskInput"),
  taskList = document.getElementById("taskList");

taskList.addEventListener("click", changesLi);

function addTask() {
  if (!taskInput.value) return alert("Please enter a task.");

  var li = createLi(taskInput.value);
  taskList.prepend(li);
  taskInput.value = "";
}

function createLi(title) {
  var li = document.createElement("li"),
    span = document.createElement("span"),
    div = document.createElement("div"),
    remove = document.createElement("a"),
    done = document.createElement("a"),
    doneImg = document.createElement("img"),
    removeImg = document.createElement("img");

  span.textContent = title;
  li.className = "task";
  div.className = "links";
  done.href = "#";
  done.className = "done";
  doneImg.alt = "done";
  done.appendChild(doneImg);
  remove.href = "#";
  remove.className = "remove";
  removeImg.alt = "remove";
  remove.appendChild(removeImg);
  li.appendChild(span);
  li.appendChild(div);
  div.appendChild(done);
  div.appendChild(remove);

  return li;
}

function changesLi(e) {
  if (e.target.parentElement.classList.contains("remove")) {
    e.target.parentElement.parentElement.parentElement.remove();
  }

  if (e.target.parentElement.classList.contains("done")) {
    const tasks = document.querySelectorAll(".done");
    tasks.forEach(task => {
      task.addEventListener("click", function() {
        console.log(e.target);
      });
    });
  }
}

<form class="task-form" onsubmit="event.preventDefault();addTask()">
  <input id="taskInput" placeholder="New task..." autocomplete="off" />
  <input type="submit" value="Add Task" class="submit" />
</form>
<ul id="taskList"></ul>

当我单击包含 done 类的按钮时，e.target 值每次都会以数组形式返回给我。我第一次点击时，没有任何返回。第二次，它返回目标一次，第三次，返回目标两次，依此类推......无论我如何搜索，都没有得到任何结果。我的问题出在哪里？

Answer 1

每当用户单击done 按钮时，您都会向所有done 按钮添加一个点击监听器。添加监听器不会替换以前的监听器，因此每次单击它都会添加另一个监听器。当他们再次单击时，它会运行执行 console.log(e.target) 的所有监听器，以及向所有按钮添加另一个监听器的原始监听器。

您应该只在原始监听器中记录您想要的内容，而不添加任何其他监听器。

var taskInput = document.getElementById("taskInput"),
  taskList = document.getElementById("taskList");

taskList.addEventListener("click", changesLi);

function changesLi(e) {
  if (e.target.parentElement.classList.contains("remove")) {
    e.target.parentElement.parentElement.parentElement.remove();
  } else if (e.target.parentElement.classList.contains("done")) {
    console.log(e.target.parentElement.parentElement.parentElement.querySelector("span").textContent);
  }
}

function addTask() {
  if (!taskInput.value) return alert("Please enter a task.");

  var li = createLi(taskInput.value);
  taskList.prepend(li);
  taskInput.value = "";
}

function createLi(title) {
  var li = document.createElement("li"),
    span = document.createElement("span"),
    div = document.createElement("div"),
    remove = document.createElement("a"),
    done = document.createElement("a"),
    doneImg = document.createElement("img"),
    removeImg = document.createElement("img");

  span.textContent = title;
  li.className = "task";
  div.className = "links";
  done.href = "#";
  done.className = "done";
  doneImg.alt = "done";
  done.appendChild(doneImg);
  remove.href = "#";
  remove.className = "remove";
  removeImg.alt = "remove";
  remove.appendChild(removeImg);
  li.appendChild(span);
  li.appendChild(div);
  div.appendChild(done);
  div.appendChild(remove);

  return li;
}

<form class="task-form" onsubmit="event.preventDefault();addTask()">
  <input id="taskInput" placeholder="New task..." autocomplete="off" />
  <input type="submit" value="Add Task" class="submit" />
</form>
<ul id="taskList"></ul>