``` 事件绑定使用圆括号，输入事件名称，例如点击事件：(click) ``` ## 一、事件绑定的使用 1.执行赋值表达式 ``` input (click)="color='cyan'">Cyan ``` 2.绑定事件处理函数 ``` <input (click)="fn()">Cyan export class AppComponent { //事件处理函数 fn() { console.log("触发了点击事件") } } ``` 3.传入事件对象:`$even` ``` //传入事件对象 <input (click)="fn($even)">Cyan export class AppComponent { fn(e) { console.log(e) //打印事件对象 } } ``` ## 二、自定义事件 >[info] 使用EventEmitter实现自定义事件(父子组件通讯) 使用EventEmitter 来触发自定义事件，通常用于父子组件通讯 1.子组件引入`EventEmitter`模块和`Onput`模块，`Onput`模块用于把`EventEmitter`的实例暴露出去 ``` import {Component,OnInit,EventEmitter,Output}from '@angular/core'; //引入EventEmitter模块,通过EventEmitter实现自定义事件 @Component({ selector: 'app-child', template: `<button (click)='clickfn()'>点击我触发自定义事件</button>` styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit{ data: object = { 'msg': '测试', 'code': 1 }; //创建自定义事件对象 @Output() deleteRequest = new EventEmitter(); clickfn() { //触发自定义事件,并传递一些参数 this.deleteRequest.emit(this.data); } } ``` 2.父组件监听子组件的自定义事件，并绑定事件处理函数。 ``` // 监听子组件的自定义事件,并绑定事件处理函数 通过$event接受传递的参数 import { Component,OnInit,OnInit,ViewChild } from '@angular/core'; @Component({ selector: 'app-child', template: `<app-child (deleteRequest)='fn($event)'></app-child>` styleUrls: ['./child.component.css'] }) export class ParentComponent implements OnInit{ fn(data):void{ console.log(data) } } ``` ## 三、按键事件过滤 >[info] 监听键盘的某个按键 ``` <input #box (keyup.enter)="onEnter(box.value)" placeholder='监听按下回车的事件'> ``` 常见的按键监听： | 事件| 说明 | | --- | --- | | (keyup.enter)| 监听回车键 | | (keyup.space) | 监听空格键 | | (keyup.control) |监听ctrl键 | | (keyup.shift)| 监听shift键 | | (keyup.alt)| 监听alt键 |