用户的操作，如点击链接，按下按钮，输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。
绑定到用户输入事件
您可以使用Angular事件绑定来响应任何DOM事件。 许多DOM事件由用户输入触发。 绑定到这些事件提供了从用户获得输入的方法。
要绑定到DOM事件，请在括号中包围DOM事件名称，并为其分配引用的模板语句。 以下示例显示了实现click处理程序的事件绑定：
<button (click)="onClickMe()">Click me!</button>
等号左边的（click）标识按钮的点击事件作为绑定的目标。 等号右边的引号中的文本是模板语句，它通过调用组件的onClickMe（）方法来响应click事件。
在编写绑定时，请注意模板语句的执行上下文。 模板语句中的标识符属于特定的上下文对象，通常是控制模板的Angular组件。 上面的例子显示了一行HTML，但是HTML属于一个更大的组件：
lib/src/click_me_component.dart (component)
@Component(
selector: 'click-me',template: '''
<button (click)="onClickMe()">Click me!</button>
{{clickMessage}}
''',)
class ClickMeComponent {
String clickMessage = '';
void onClickMe() => clickMessage = 'You are my hero!';
}
当用户点击按钮时，Angular从ClickMeComponent调用onClickMe（）方法。
通过事件对象获取用户输入
DOM事件携带可能对组件有用的信息的有效载荷。 本节介绍如何绑定到输入框的按键事件，以在每次按键后获取用户的输入。
下面的代码监听一个keyup事件，并将整个事件有效载荷（$ event）传递给组件事件处理程序。
lib/src/keyup_components.dart (v1 template)
template: '''
<input (keyup)="onKey(\$event)">
<p>{{values}}</p>
''',
$EVENT VS. \$EVENT
当用户按下并释放一个键时，会发生一个键盘事件，而Angular在$ event变量中提供一个相应的DOM事件对象，该代码将该代码作为参数传递给组件的onKey（）方法。
lib/src/keyup_components.dart (v1 class,untyped)
class KeyUp1Component {
String values = '';
void onKey(dynamic event) {
values += event.target.value + ' | ';
}
}
$ event对象的属性取决于DOM事件的类型。 例如，鼠标事件包含与输入框编辑事件不同的信息。
所有标准的DOM Event对象都有一个target属性，它是引发事件的元素的引用。 在这种情况下，target指向<input>元素，event.target.value返回该元素的当前内容。
每次调用之后，onKey（）方法将输入框值附加到组件的values属性，后跟一个分隔符（|）。 该模板使用Angular插值（{{...}}）来显示值属性。
假设用户输入字母“abc”，然后退格逐一删除。 以下是UI显示的内容：
a | ab | abc | ab | a | |
或者，您可以通过用event.key替换event.target.value来累积每个Key。 在这种情况下，相同的用户输入会产生以下结果：
a | b | c | Backspace | Backspace | Backspace |
事件类型
上面的例子声明了onKey（）事件参数是动态的。 虽然这简化了一些代码，但使用更具体的类型可以揭示事件对象的属性并防止愚蠢的错误。
以下示例用类型重写该方法：lib/src/keyup_components.dart (v1 class)
class KeyUp1Component {
String values = '';
void onKey(KeyboardEvent event) {
InputElement el = event.target;
values += '${el.value} | ';
}
}