用户的操作，如点击链接，按下按钮，输入文字引发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

Dart文件中的非原始字符串需要$前面的。 如果模板位于HTML文件中，请使用$ event而不是 $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}  | ';
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!