绑定事件了解

刚刚通过香草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); 
};

来源

2017-07-21 Joe Consterdine

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

来源

2017-07-21 11:55:57

但是'queryselector'获取第一个复选框而不是第一个'taskListItem'？我不明白如何选择正确的列表项。谢谢！ –

任何值'taskListItem.querySelector（“input [type = checkbox]”）;'返回被分配给'checkBox'。因此，'querySelector（）'获取第一个与“input [type = checkbox]”属性相同的css元素，并将该元素赋值给变量'checkbox' –

绑定事件了解

回答

相关问题