绑定事件了解

Question

我只是浏览了一些普通的JS待办事项列表上的代码，我对这一部分是如何工作的感到有点困惑。

最让我头疼的是checkbox是如何知道哪个列表项是活动的。我知道我们在开始循环列表项并将它们作为参数传递，但是checkbox如何知道是哪一个呢？我们不是在这里将多个列表项传递给'taskListItem‘参数吗？

因此，当我们单击复选框时，我对它如何知道要使用哪个项目感到困惑。

同样，这是一种将事物绑定在一起的常见方式吗？我正在尝试学习模式，这样我就可以完全理解正在发生的事情，从而能够以特定的方式构建，而不仅仅是编写任何旧代码。

如果有人能分析一下这里发生的事情，我将不胜感激！

谢谢

var bindTaskEvent = function (taskListItem, checkBoxEventHandler) {
    debugger

    console.log("Binding Events to Checkbox, Edit, Delete Buttons")

    // Select task's <li> children
    var checkBox = taskListItem.querySelector("input[type=checkbox]");
    var editButton = taskListItem.querySelector("button.edit");
    var deleteButton = taskListItem.querySelector("button.delete");

    // Bind checkBoxEventHandler to checkbox
    checkBox.onchange = checkBoxEventHandler;;

    // Bind editTask to Edit button
    editButton.onclick = editTask;

    // Bind deleteTask to Delete Button
    deleteButton.onclick = deleteTask;
};

// TASK COMPLETED

var taskCompleted = function () {

    console.log("Running taskCompleted");

    var listItem = this.parentNode;
    completedTasks.appendChild(listItem);
    bindTaskEvent(listItem, taskIncomplete);
}

// TASK INCOMPLETE

var taskIncomplete = function () {

    console.log("Running taskIncomplete");

    var listItem = this.parentNode;
    incompleteTasks.appendChild(listItem);
    bindTaskEvent(listItem, taskCompleted);
}

//// WIRING OF THINGS...

// cycle over To Do List items
for (var i = 0; i < incompleteTasks.children.length; i++) {
    // bind events to <li>'s children
    bindTaskEvent(incompleteTasks.children[i], taskCompleted);
};

// cycle over Completed Items
for (var i = 0; i < completedTasks.children.length; i++) {
    // for each list item
    // bind event to <li> children (taskCompleted)
    bindTaskEvent(completedTasks.children[i], taskIncomplete);
};

Answer 1

是的，‘CSS’获得多个列表项，但querySelector()方法返回与文档中指定的taskListItem选择器匹配的第一个元素。因此，第一个元素存储在variable复选框中，而不是整个列表中。