バインドイベントの理解

Question

バニラ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セレクタ（S）に一致する最初の要素を返します。したがって、最初の要素はリスト全体ではなく変数チェックボックスに格納されます。