# 事件绑定

通过事件绑定，你可以侦听并响应用户操作，比如按键、鼠标移动、点击和触摸。

包含本指南中代码片段的可工作范例，参阅现场演练/ 下载范例 。

# 前提条件

组件基础
模板基础
绑定语法
模板语句

# 绑定到事件

要绑定到事件，你可以使用 Angular 事件绑定语法。此语法由等号左侧括号中的目标事件名称和右侧带引号的模板语句组成。

创建以下示例；目标事件名是 click，模板语句是 onSave()。

<button (click)="onSave()">Save</button>

事件绑定侦听按钮的单击事件，并在发生单击时调用组件的 onSave()。

Syntax diagram

# 确定事件目标

为了确定事件目标，Angular 会检查目标事件的名称是否与已知指令的 event 属性匹配。

创建以下示例：（Angular 会检查 myClick是否是自定义 ClickDirective上的事件）

src/app/app.component.html

html
<h4>myClick is an event on the custom ClickDirective:</h4>
<button type="button" (myClick)="clickMessage=$event" clickable>click with myClick</button>
{{clickMessage}}

如果目标事件名称 myClick与 ClickDirective的输出属性不匹配，Angular 将改为绑定到基础 DOM 元素上的 myClick事件。

# 绑定到被动事件

这是一项高级技术，对于大多数应用程序来说不是必需的。如果你想优化导致性能问题的频繁发生的事件，可能会发现这很有用。

Angular 还支持被动事件侦听器。比如，使用以下步骤使滚动事件变为被动的。

在 src目录下创建一个文件 zone-flags.ts。
将以下行添加到此文件中。

(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];

在 src/polyfills.ts文件中，在导入 zone.js 之前，先导入新创建的 zone-flags。

import './zone-flags';
import 'zone.js';  // Included with Angular CLI.

在这些步骤之后，如果你为 scroll事件添加事件侦听器，侦听器就会是 passive的。

# 绑定到键盘事件

你可以用 Angular 的绑定语法绑定到键盘事件。你可以指定要绑定到键盘事件的键值或代码。它们的 key和 code字段是浏览器键盘事件对象的原生部分。默认情况下，事件绑定假定你要使用键盘事件上的 key字段。你还可以用 code字段。

键的组合可以用点（.）分隔。例如， keydown.enter将允许你将事件绑定到 enter键。你还可以用修饰键，例如 shift、 alt、 control和 Mac 中的 command键。以下示例展示了如何将键盘事件绑定到 keydown.shift.t。

<input (keydown.shift.t)="onKeydown($event)" />

根据操作系统的不同，某些组合键可能会创建特殊字符，而不是你期望的组合键。例如，当你同时使用 option 和 shift 键时，MacOS 会创建特殊字符。如果你绑定到 keydown.shift.alt.t，在 macOS 上，该组合会生成 ˇ而不是 t，它与绑定不匹配，也不会触发你的事件处理程序。要绑定到 macOS 上的 keydown.shift.alt.t，请使用 code键盘事件字段来获取正确的行为，例如此示例中显示的 keydown.code.shiftleft.altleft.keyt。

<input (keydown.code.shiftleft.altleft.keyt)="onKeydown($event)" />

code字段比 key字段更具体。 key字段总是会报告 shift，而 code字段将指明 leftshift或 rightshift。使用 code字段时，你可能需要添加单独的绑定以捕获你想要的所有行为。使用 code字段时无需处理操作系统特有的行为，例如 macOS 上的 shift + option行为。

有关更多信息，请访问键值和键码的完整参考，以帮助你构建事件字符串。

# 接下来呢？

关于事件绑定工作原理的更多信息，请参阅事件绑定工作原理。
property 绑定
文本插值
双向绑定

← 类和样式绑定属性绑定 →