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

江佐
2023-12-01

转载自 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 对象。

 类似资料: