Bind Event Handlers

Hi,

Not sure if you have found out and moved on by now.

At first I was also not following the instructor's intentions; but I think I found out.

TL;DR: The bindTaskEvents function has two arguments. taskListItem passes the list item it needs to bind task events to. checkBoxEventHandler is wether to bind taskCompleted or taskIncomplete depending on weather it's an incomplete task or a complete one. The for loops pass the arguments to bindTaskEvents.

He wants to add interactivity to the List Items (each Task). This means creating even handlers for the buttons ('add', 'delete', edit') and for the checkbox. All list items (tasks) need these events to be connected to their specific function.

All button events work the same in any task (regardless if it's a completed task or an incomplete task: delete button deletes, etc) excepting the checkbox. The checkbox behaves differently depending on weather we are talking about a completed task or an incomplete one.

So the instructor creates a function (bindTaskEvents) that will work on both scenarios: the Complete Tasks and the Incomplete Tasks.

BindTaskEvents accepts two arguments to be passed on. The first argument is the specific task to which it is going to attach event handlers(taskListItem), and the second argument is weather it needs to bind taskCompleted functionality or taskIncomplete functionality to the checkbox, depending on what kind of task we're dealing with. This is why he added this second argument and named it checkBoxEventHandler.

That way this one function is able to Bind Task Events to All tasks weather they're complete or incomplete. It only needs to be 'told' which list item to Bind task Events and weather it needs to bind taskCompleted or taskIncomplete events.

Now the instructor creates a for loop that goes through all the Incomplete tasks. The loop goes through all the list items (tasks) and passes each to the bindTaskEvents, also 'telling' it to add the taskCompleted functionality (function). So the incomplete task can be 'checkboxed' as Complete.

He creates another for loop that works in a similar way but for the complete tasks.

Dunno if this is what you meant. But the instructor does not elaborate on this so I thought it would be good to note it down.

IN SHORT:

• There is only one "addButton"

  • Thus, we can just use the event handler (onclick) on that single add button.
  • The edit and delete buttons are different
  • The edit and delete buttons are generated every time we add a new todo to the todo list... you could say the add button is "static" (there will only ever be one add button and it is always located at the top of the page), and the EDIT/DELETE buttons are "dynamic" (generated as we add more tasks)
  • As a result, we can't simply add "onclick" to EDIT and DELETE buttons... we need to create a function to tell javascript to (1) determine how many of these todos are there currently and then (2) to add the edit/delete functionality to each of those buttons.
  • This is why the process we used to make the add button "live" is different from the process we are now using on the EDIT and DELETE buttons

Thank you Jose, this really helped me understand this function. It isn't at all clear in the video as it wasn't explained very well.