title: Try to understand call back functions in the ToDoList project
body: <p>So I learned that call back function is a function that is passed to another function as a parameter , and the callback function is called (or executed) inside the other function. one example is below. The "callback" is placed at the third parameter, the function passes the value of "result" to "callback" and then "callback" were called in a form of a function. </p>
  
  <pre><code>var merge = function(array1, array2, callback){  
    var result = [];
    for (var i = 0; i &lt; array1.length; i++) {
     result[i] = array1[i] + array2[i];
    };
  callback(result) 
  };
  
  var x=merge([1, 2, 3, 4], [5, 6, 7, 8], function(merged) {console.log(merged)});
  </code></pre>
  
  <p>however, when I am trying to use callback in real project, such the ToDoList below. I know the callback functions are used(<strong>I learned that call backs are used in events handlers???</strong>), but why the format of those callbacks are so different from what I learned as example above? For example, as you can see I highlighted the parts with **   ** where I believe callbacks are used...For example, in the addTask function, "bindTaskEvents" looks like a callback for me, but why it is not passed to addTask function as a parameter? also, I don't see where the "bindTaskEvents" is called later and in what format? </p>
  
  <pre><code>var addTask=function(){
   var listItem=createNewTaskElement(taskInput.value) 
   incompleteTasksHolder.appendChild(listItem);
    **bindTaskEvents(listItem,taskCompleted);**
    taskInput.value="";
  
  };
  </code></pre>
  
  <p>p.s. I know the project is not purely based on JS, it is built based on Document Object Model, it seems to complicate the concepts of JS for beginners like me who is trying to learn JS.<br>
  ---------------below is complete project for your reference --------------------</p>
  
  <pre><code>var taskInput=document.getElementById("new-task");
  var addButton=document.getElementsByTagName("button")[0];  //first button
  var incompleteTasksHolder=document.getElementById("incomplete-tasks");
  var completedTasksHolder=document.getElementById("completed-tasks");
  
  
  var createNewTaskElement=function(taskString){ //checkbox
     var listItem=document.createElement("li")
     var checkBox=document.createElement("input")
     var label=document.createElement("label")
     var editInput=document.createElement("input") 
     var editButton=document.createElement("button")
     var deleteButton=document.createElement("button")
  
    checkBox.type="checkbox";
    editInput.type="text";
  
    editButton.innerText="Edit";
    editButton.className="edit";
    deleteButton.innerText="Delete";
    deleteButton.className="delete";
  
    label.innerText = taskString;
  
    listItem.appendChild(checkBox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);
  
  return listItem;
  }
  
  var addTask=function(){
  console.log("Add task..."); 
   var listItem=createNewTaskElement(taskInput.value) 
   incompleteTasksHolder.appendChild(listItem);
    **bindTaskEvents(listItem,taskCompleted);**
    taskInput.value="";
  
  };
  
  var editTask=function(){
  console.log("edit task...");  
  
  var listItem=this.parentNode;
  
  var editInput=listItem.querySelector("input[type=text]");
  var label=listItem.querySelector("label");
  var containsClass=listItem.classList.contains("editMode");
  
    if(containsClass){
    label.innerText=editInput.value;
    }else{
    editInput.value=label.innerText;
    }
    listItem.classList.toggle("editMode");  
  
    };
  
  var deleteTask=function(){
  console.log("delete task...");
  
  
    var listItem=this.parentNode;
    var ul=listItem.parentNode;
    ul.removeChild(listItem);
  }
  
  var taskCompleted=function(){
  console.log("Completed task..."); 
  var listItem= this.parentNode
  completedTasksHolder.appendChild(listItem);
    **bindTaskEvents(listItem, taskIncomplete);**
  }
  
  var taskIncomplete=function(){
  console.log("Incompleted task...");
    var listItem= this.parentNode;
  incompleteTasksHolder.appendChild(listItem);
    **bindTaskEvents(listItem, taskCompleted);**
  
  }
  
  var bindTaskEvents=function(taskListItem,checkBoxEventHandler){        
  console.log("Bind list item events");  
      var checkBox = taskListItem.querySelector('input[type=checkbox]');
      var editButton = taskListItem.querySelector('button.edit');
      var deleteButton = taskListItem.querySelector('button.delete');
      editButton.onclick = editTask;
      deleteButton.onclick = deleteTask;
      checkBox.onchange = checkBoxEventHandler; 
  };
  
  
  var ajaxRequest=function(){
  console.log("AJAX request");
  }
  
  addButton.addEventListener("click",addTask);;
  addButton.addEventListener("click",ajaxRequest); 
  
  for(var i=0;i&lt;incompleteTasksHolder.children.length;i++){
  **bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);**
  
  }
  
  for(var i=0;i&lt;completedTasksHolder.children.length;i++){
  **bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);**
  
  }
  </code></pre>