下面，我们要做的事就是，在文本框里，输入任务的内容 .. 按一下回车以后，会去创建一个新的任务模型，并且会把这个任务添加到浏览器的 Local Storage 里面存储 ... 同时会把任务显示到应用的页面上。

实现这个功能，可以这样。我们可以去监听一下用户在这个文本框里按下键盘的事件 ... 也就是，然后去判断一下，按的这个按键是不是回车键 ... 如果是的话，就会根据用户在文本框里输入的内容，去创建一个新的任务，存储这个任务，同时也会把它添加到任务的集合里面。

往集合里添加新的任务，会发生一个添加事件，然后我们需要再去监听这个集合的添加事件，这个事件发生的时候，就去把这个模型追加到应用的界面上显示出来。

视图

先打开应用的视图，然后在这个视图里面，可以添加一个 events 属性 ... 这个属性是一个对象 ... 在这个对象里，可以指定一下要监听的 DOM 事件 ... 还有处理事件要用到的方法 ...

events: {}

在这里，我们要监听的 DOM 事件是按下按键的事件 ... 这个事件的名字叫做 keypress .... 然后再输入一个空格 ... 再去指定一下，在哪个元素上发生的这个事件 .. 这里就是在 #new-todo 这个 id 的元素上发生的按下按键的事件 ... 也就是输入任务内容用的那个文本框 ...

注意这个元素需要包含在视图的 el 属性里面才行。在这个元素上发生按键事件以后，去执行一下 createOnEnter 这个方法 ...

events: {
'keypress #new-todo': 'createOnEnter'
},

在这个视图里面，我们需要再去定义一下这个方法 ...

createOnEnter: function(event) {}

这个方法可以接受一个事件参数 ... 然后，在这个方法里面，我们先去测试一下，怎么样得到用户按下的键盘上的按键 ...

这个按键是在事件对象里面的 which 这个属性里面 ... 我们可以把这个属性输出到控制台上 ...

createOnEnter: function(event) {
console.log(event.which);
}

测试

保存 .. 再到浏览器上去试试 ...

刷新一下 ... 打开控制台 ... 然后在这个文本框里输入一点东西 ... 输入一个字母 n ... 注意这会触发 keypress 这个 DOM 事件 ... 因为在这个元素上监听了这个事件 ... 处理它的方法会在控制台上，输出按下的按键的代号 ...

你会看到，按键 n 的代号是 110 .. 再输入几个字符 ... 在控制台上会显示出对应的代号 ...

下面，我们可以看一下回车键的代号 ... 按一下回车 ...

在控制台上，会显示 13 ... 也就是回车键的代码就是数字 13 ....

在下面的视频里，我们再去利用一下这个按键 ...