今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 
明天计划的事情：（一定要写非常细致的内容） 
遇到的问题：（遇到什么困难，怎么解决的） 
收获：（通过今天的学习，学到了什么知识）

用户输入

    当用户点击链接、按下按钮或者输入文字时，这些用户动作都会产生 DOM 事件。

1.绑定到用户输入事件

    可以使用 Angular 事件绑定机制来响应任何 DOM 事件。 许多 DOM 事件是由用户输入触发的。绑定这些事件可以获取用户输入。

   要绑定 DOM 事件，只要把 DOM 事件的名字包裹在圆括号中，然后用放在引号中的模板语句对它赋值就可以了。

   下例展示了一个事件绑定，它实现了一个点击事件处理器：

          <button (click)="onClickMe()">Click me!</button>

   等号左边的 (click) 表示把按钮的点击事件作为绑定目标。 等号右边引号中的文本是模板语句，通过调用组件的 onClickMe 方法来响应这个点击事件

    写绑定时，需要知道模板语句的执行上下文。 出现在模板语句中的每个标识符都属于特定的上下文对象。 这个对象通常都是控制此模板的 Angular 组件。

2.通过 $event 对象取得用户输入

    下面的代码监听 keyup 事件，并将整个事件载荷 ($event) 传递给组件的事件处理器。

template: `

  <input (keyup)="onKey($event)">

  <p>{{values}}</p>

`

    当用户按下并释放一个按键时，触发 keyup 事件，Angular 在 $event 变量提供一个相应的 DOM 事件对象，上面的代码将它作为参数传递给 onKey() 方法。

export class KeyUpComponent_v1 {

  values = '';

  onKey(event: any) { // without type info

    this.values += event.target.value + ' | ';

  }

}

3.$event的类型   

    上例将 $event 转换为 any 类型。 这样简化了代码，但是有成本。 没有任何类型信息能够揭示事件对象的属性，防止简单的错误。

   下面的例子，使用了带类型方法：

export class KeyUpComponent_v1 {

  values = '';

  onKey(event: KeyboardEvent) { // with type info

    this.values += (<HTMLInputElement>event.target).value + ' | ';

  }

}

$event 的类型现在是 KeyboardEvent。 不是所有的元素都有 value 属性，所以它将 target 转换为输入元素。 OnKey 方法更加清晰地表达了它期望从模板得到什么，以及它是如何解析事件的。