Javascript 待办事项列表删除和完成按钮

Question

因此，当我单击删除和完成按钮时，它会运行这些功能

function deleteListItem(){
   alert("Item was deleted");            
}


function completeListItem(){
   alert("This item was completed");
}

两个按钮。我想知道如何使用事件委托来分隔这些函数，这样每当我单击完成按钮时它就不会运行这两个函数。

Answer 1

var deleteButton = document.getElementById("Remove");
  deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
  completeButton.addEventListener("click", completeListItem);

将 addEventListener 分配给特定的 id 按钮。 id todo 是 ul 所以点击 ul 里面的任何东西都会运行两个函数

Answer 2

在您的 javascript 中，当您声明 deleteButton 和 completeButton 时，它们都被分配了相同的元素，即 ul。该元素包含整个列表。那不是你想要的，你想要处理按钮上的点击。 deleteButton 应该分配给您的删除按钮元素，您的 completeButton 应该分配给您的完整按钮元素。为此，只需使用所需按钮的 ID 而不是 UL 的 ID。

在您的代码中，更改为：

var deleteButton = document.getElementById("todo");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("todo");
completeButton.addEventListener("click", completeListItem);

为此：

var deleteButton = document.getElementById("Remove");
deleteButton.addEventListener("click", deleteListItem);
var completeButton = document.getElementById("Complete");
completeButton.addEventListener("click", completeListItem);

编辑： 由于您的按钮不是唯一的，因此您不应使用 id 来添加事件侦听器。您应该使用 class 并通过循环将事件侦听器分配给具有 class 的所有元素。在您的 html 中为您的按钮添加一个 class 属性，如下所示：<button class="Remove"><i class="fa fa-trash" aria-hidden="true"></i></button>。然后这样处理事件：

var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButton = document.getElementsByClassName("Complete");
for (var i = 0; i < completeButton.length; i++) {
        completeButton[i].addEventListener('click', completeListItem, false);
}

Javascript 待办事项列表删除和完成按钮

Javascript ToDo List Delete and Complete Buttons

javascript

events

event-delegation