使用者點選連結、按下按鈕或者輸入文字時，這些使用者的互動行為都會觸發 DOM 事件。
本章中，我們将學習如何使用 Angular 事件綁定文法來綁定這些事件。
以下Gif圖示範了該執行個體的操作：
源代碼可以在文章末尾下載下傳。
我們可以使用 Angular 事件綁定機制來響應任何 DOM 事件 。
以下執行個體将綁定了點選事件：
等号左邊的 (click) 表示把該按鈕的點選事件作為綁定目标 。 等号右邊，引号中的文本是一個 模闆語句
完整代碼如下：
import { Component } from '@angular/core';
@Component({
selector: 'click-me',
template: `
<button (click)="onClickMe()">點我!</button>
{{clickMessage}}`
})
export class ClickMeComponent {
clickMessage = '';
onClickMe() {
this.clickMessage = '菜鳥教程!';
}
我們可以綁定到所有類型的事件。
讓我們試試綁定到一個輸入框的 keyup 事件，并且把使用者輸入的東西回顯到螢幕上。
selector: 'key-up1',
<input (keyup)="onKey($event)">
<p>{{values}}</p>
`
export class KeyUpComponent_v1 {
values = '';
/*
// 非強類型
onKey(event:any) {
this.values += event.target.value + ' | ';
*/
// 強類型
onKey(event: KeyboardEvent) {
this.values += (<HTMLInputElement>event.target).value + ' | ';
以上代碼中我們監聽了一個事件并捕獲使用者輸入，Angular 把事件對象存入 $event 變量中。
元件的 onKey() 方法是用來從事件對象中提取出使用者輸入的，再将輸入的值累加到 values 的屬性。
你可以通過使用局部模闆變量來顯示使用者資料，模闆引用變量通過在辨別符前加上井号 (#) 來實作。
下面的執行個體示範如何使用局部模闆變量：
selector: 'loop-back',
<input #box (keyup)="0">
<p>{{box.value}}</p>
export class LoopbackComponent { }
我們在 <code><input></code> 元素上定義了一個名叫 <code>box</code> 的模闆引用變量。
<code>box</code> 變量引用的就是 <code><input></code> 元素本身，這意味着我們可以獲得 input 元素的 <code>value</code> 值，并通過插值表達式把它顯示在 <code><p></code> 标簽中。
我們可以使用模闆引用變量來修改以上 keyup 的執行個體：
selector: 'key-up2',
<input #box (keyup)="onKey(box.value)">
export class KeyUpComponent_v2 {
onKey(value: string) {
this.values += value + ' | ';
我們可以隻在使用者按下回車 (enter) 鍵的時候才擷取輸入框的值。
(keyup) 事件處理語句會聽到每一次按鍵，我們可以過濾按鍵，比如每一個 $event.keyCode，隻有在按下Enter鍵才更新 values 屬性。
Angular 可以為我們過濾鍵盤事件，通過綁定到 Angular 的 keyup.enter 僞事件監聽Enter鍵的事件。
selector: 'key-up3',
<input #box (keyup.enter)="values=box.value">
export class KeyUpComponent_v3 {
接下來我們可以使用blur( 失去焦點 ) 事件，它可以再元素失去焦點後更新 values 屬性。
以下執行個體同時監聽輸入Enter鍵與輸入框失去焦點的事件。
selector: 'key-up4',
<input #box
(keyup.enter)="values=box.value"
(blur)="values=box.value">
export class KeyUpComponent_v4 {
本文所使用的源碼可以通過以下方式下載下傳，不包含 node_modules 和 typings 目錄。
源代碼下載下傳