Angular 事件_Angular $event - angular 基础教程 - Angular 教程网

转载自 http://www.ngui.cc/news/show-113.html

获取鼠标事件

在第三节的示例中，假如我们需要获取鼠标事件，那应该怎么办呢？这时，我们可以引入 $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 对象。