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添加事件监听器。您应该使用一个类，并通过循环将事件侦听器分配给该类的所有元素。在html中，将类属性添加到按钮中，如下所示：<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待办事项列表删除和完成按钮

2 个答案: