``` 事件綁定使用圓括號，輸入事件名稱，例如點擊事件：(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鍵 |