Question

刚刚浏览一下vanilla JS上的一些代码，我对这部分的工作方式感到有点困惑。

有点让我头疼的是复选框知道哪个列表项处于活动状态。我知道我们在开头循环列表项并将它们作为参数传递但是复选框如何知道哪一个？我们不是在这里将多个列表项传递给'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

是的，'taskListItem'获取多个列表项，但querySelector（）方法返回与文档中指定的CSS选择器匹配的第一个元素。因此，第一个元素存储在变量复选框中而不是整个列表中。

绑定事件了解

1 个答案: