在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入 $event 变量,具体如下:
import {Component, OnInit} from '@angular/core';
@Component({ selector: 'app-simple-form', template: ` <div> <input #myInput type="text"> <button (click)="onClick($event, myInput.value)">点击</button> </div> `, styles: [] })
export class SimpleFormComponent implements OnInit { onClick(event, value) {
console.log(event); console.log(value); } ngOnInit() {} }
成功运行以上代码,当我们点击按钮时,控制台将输出:
MouseEvent {isTrusted: true, screenX: 180, screenY: 207, clientX: 165, clientY: 75…}
需要注意的是,参数名一定要使用 $event ,否则无法获取正确的鼠标事件。
此外,onClick($event, myInput.value) 表达式中,$event 的顺序是任意的,如:
<button (click)="onClick(myInput.value, $event)">点击</button>
当 Angular 在调用我们的事件处理函数时,会自动帮我们处理调用的参数。$event 自动映射为触发的事件,与我们 Provider 中 Token 的作用类似。
除了监听鼠标事件外,我们还可以监听键盘事件。
import {Component, OnInit} from '@angular/core';
@Component({ selector: 'app-simple-form', template: ` <div> <input #myInput type="text" (keydown.enter)="onEnter($event, myInput.value)"> <button (click)="onClick($event, myInput.value)">点击</button> </div> `, styles: [] })
export class SimpleFormComponent implements OnInit { // ...
onEnter(event, value) { console.log(event); console.log(value);
} }
以上代码中, (keydown.enter)="onEnter($event, myInput.value)" 表达式表示我们监听键盘 enter 键的按下事件,当我们按下键盘的 enter 键时,
将会调用组件类中定义的 onEnter() 方法。我们同样也可以通过 $event 来获取 KeyboardEvent 对象。