I’m not gonna lie the code is pretty advanced in the vanillajs app and I haven’t looked at MVC code in a long time. The event is actually the change
event on the input. If you keep the Keyboard breakpoints and try to edit one of the todos it will fire the breakpoint.
Here is my (poor attempt) at tracing part of the code:
controller.js
function Controller(model, view) {
var self = this;
self.model = model;
self.view = view;
/* 'newTodo' is the event, function is the handler */
self.view.bind('newTodo', function (title) {
self.addItem(title);
});
...rest of code
}
view.js
/* the event and handler */
View.prototype.bind = function (event, handler) {
var self = this;
/* the event */
if (event === 'newTodo') {
/* second argument to $on() is the type, here the 'change' type, i.e. the 'change' event */
$on(self.$newTodo, 'change', function () {
handler(self.$newTodo.value);
});
}
...rest of code
}
helpers.js
/* the $on() signature
* remember the type that was pass is the 'change' type, i.e. the 'change' event
*/
window.$on = function (target, type, callback, useCapture) {
target.addEventListener(type, callback, !!useCapture);
};
To see when the change
event fires you can right-click the input element and select it in the DOM view, now go to the console tab and put in some code:
/* $0 is the element selected in the DOM view */
$0.onchange = () => {
console.log('changed')
}
Now try entering a todo and press enter, you will see the change event fire.