綁定事件瞭解

剛剛通過香草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' –

綁定事件瞭解

回答

相關問題